navigation changes

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
User avatar
Lumpy Burgertushie
Registered User
Posts: 64234
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navigation changes

Post by Lumpy Burgertushie » Mon Mar 19, 2018 5:17 am

yes
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

User avatar
GanstaZ
Registered User
Posts: 272
Joined: Wed Oct 11, 2017 10:29 pm
Location: Zverse

Re: navigation changes

Post by GanstaZ » Mon Mar 19, 2018 1:19 pm

Why make something so simple, so difficult? If you have 2 different codes & it does the same thing, that means you need to refactor it, so it would be easy to maintain. Use 1 style (example: your forum current style) and include the parts you need (like header & footer & so on) on any page you want.

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Mon Mar 19, 2018 1:50 pm

I have a normal website, unrelated to the BB. and have a link on my site to the BB.

User avatar
GanstaZ
Registered User
Posts: 272
Joined: Wed Oct 11, 2017 10:29 pm
Location: Zverse

Re: navigation changes

Post by GanstaZ » Mon Mar 19, 2018 1:55 pm

Normal website can use phpbb styles as well.. you just need to make it to work)

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Mon Mar 19, 2018 2:05 pm

I have it going now. I'm just trying to get my menu to go across and not on top of each other now.

http://www.empoweredgolfersmanitoba.ca/phpBB3/

Code: Select all

@media screen and (min-width: 650px) {
.nav li {
width: 95px;
border-bottom: none;
height: 20px;
line-height: 10px;
font-size: 1.8em;
display: inline-block;
margin-right: -4px;	
}

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Mon Mar 19, 2018 3:21 pm

Progress

I have one tab that is off. half of it is on top of the other, and my link tab is all messed up.

http://www.empoweredgolfersmanitoba.ca/phpBB3/#

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>

<!-- IF S_ENABLE_FEEDS -->
<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}"><!-- ENDIF -->
<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}"><!-- ENDIF -->
<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
<link rel="canonical" href="{U_CANONICAL}">
<!-- ENDIF -->

<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:
-->

<!-- IF S_ALLOW_CDN -->
<script>
WebFontConfig = {
google: {
families: ['Open+Sans:600:cyrillic-ext,latin,greek-ext,greek,vietnamese,latin-ext,cyrillic']
}
};

(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/w ... webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" media="all and (max-width: 700px)">

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->
<style>
.nav ul {
list-style: none;
background-color: #21cf20;
text-align: left;
padding: 0;c
margin: 0;
}

.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}

.nav a {
text-decoration: none;
color: #000;
display: block;
padding-left: 5px;
border-bottom: 1px solid #21cf20;
transition: .3s background-color;
}

.nav a:hover {
color: #ffffff;	
background-color: #21cf20;
}

/* Sub Menus */
.nav li li {
font-size: 1em;	
}

/*******************************************
Style menu for larger screens

Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
.nav li {
width: 95px;
border-bottom: none;
height: 20px;
line-height: 20px;
font-size: 1.8em;
display: inline-block;
margin-right: -4px;	
}

.nav a {
border-bottom: none;
}

.nav > ul > li {
text-align: left;
}

.nav > ul > li > a {
padding-left: 10;
}

/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}

.nav li:hover ul {
display: block;
}

.nav li ul li {
display: block;
}
}

</style>
</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT overall_header_body_before -->

<div id="wrap">
<a id="top" class="anchor" accesskey="t"></a>
<div id="page-header">
<div class="headerbar" role="banner">
<!-- EVENT overall_header_headerbar_before -->
<div class="inner">

<div id="site-description">
<h1 style="font-size: 3em;">Empowered Golfers Manitoba</h1>


</div>

<!-- EVENT overall_header_searchbox_before -->
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box" class="search-box search-header" role="search">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
{S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->

<div class="nav">
<ul>
<li class="home"><a href="../../../../index.html">Home</a></li>
<li class="tutorials"><a href="#">Links</a>
<ul>
<li><a href="#">Buy And Sell</a></li>
<li><a href="#">Canadian Amputee Golf Association (CAGA)</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Golf Buddy</a></li>
<li><a href="#">Golf Course Owners and Operators</a></li> 
</ul>
</li>
<li class="about"><a class="active" href="../../../../Provinces.html">Provinces</a></li>
<li class="contact"><a href="../../../../Courses.html">Courses</a></li>
<li class="contact"><a href="../../../../Snowbirds.html">Snowbirds</a></li> 
<li class="contact"><a href="http://www.empoweredgolfersmanitoba.ca/phpBB3/">Discussion Board</a></li> 
<li class="contact"><a href="../../../../Chatroom.html">Live Chat</a></li>
<li class="contact"><a href="../../../../Contact.html">Contact Us</a></li> 
</ul>
</div>
</div>	
<!-- EVENT overall_header_headerbar_after -->
</div>
<!-- EVENT overall_header_navbar_before -->
<!-- INCLUDE navbar_header.html -->
</div>

<!-- EVENT overall_header_page_body_before -->

<a id="start_here" class="anchor"></a>
<div id="page-body" role="main">
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="information" class="rules">
<div class="inner">
<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
</div>
</div>
<!-- ENDIF -->

<!-- EVENT overall_header_content_before -->

User avatar
posey
Registered User
Posts: 706
Joined: Tue Oct 06, 2009 7:34 pm
Location: The Netherlands
Name: Gijs

Re: navigation changes

Post by posey » Mon Mar 19, 2018 6:58 pm

That's cause you have set a fixed width for the tabs (at a glance of 95px), and the text is exceeding that width. That's why it's continuing the text on a new line. You either have to set the display to inline-block, change the font size or the width.
''I'm pretty sure there's a lot more to life than being really, really, ridiculously good looking. And I plan on finding out what that is.''

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Mon Mar 19, 2018 7:54 pm

I played with width and all settings. This is the closets I get to it looking good.

http://www.empoweredgolfersmanitoba.ca/phpBB3/

Code: Select all

@media screen and (min-width: 650px) {
.nav li {
width: 95px;
border-bottom: none;
height: 20px;
line-height: 20px;
font-size: 1.8em; 
display: inline-block;
margin-right: -4px;	
}

User avatar
GanstaZ
Registered User
Posts: 272
Joined: Wed Oct 11, 2017 10:29 pm
Location: Zverse

Re: navigation changes

Post by GanstaZ » Mon Mar 19, 2018 9:04 pm

If you want to learn more about css/html/responsive you should use uncle google & get all the info you need.

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Tue Mar 20, 2018 12:54 pm

I used uncle google and tried different menues and still run into aligning issues. This is a problem I have never had before with regular websites. With bbs it seems I’m missing something.

User avatar
GanstaZ
Registered User
Posts: 272
Joined: Wed Oct 11, 2017 10:29 pm
Location: Zverse

Re: navigation changes

Post by GanstaZ » Tue Mar 20, 2018 1:06 pm

Why not use those classes for navigation that exist? Take a look at how navigation below works. It is responsive, it has in-line elements & it has dropdown. Work is already done, just adopt it as you need.

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Tue Mar 20, 2018 1:26 pm

I noticed that the problem I’m having is width, and I replaced the HTML and css of different menus and end up dealing with width. I can’t make it go wider.

User avatar
GanstaZ
Registered User
Posts: 272
Joined: Wed Oct 11, 2017 10:29 pm
Location: Zverse

Re: navigation changes

Post by GanstaZ » Tue Mar 20, 2018 1:46 pm

This happens when you have fixed width. Why not use width: auto?

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Tue Mar 20, 2018 6:44 pm

I put the Width to auto and this is what I get now.

http://www.empoweredgolfersmanitoba.ca/phpBB3/

Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 » Tue Mar 20, 2018 9:12 pm

I'm starting to think that the search menu that's on the right side is stopping my menu from stretching.

Post Reply

Return to “phpBB Custom Coding”

Who is online

Users browsing this forum: No registered users and 7 guests