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
GanstaZ
Registered User
Posts: 1187
Joined: Wed Oct 11, 2017 10:29 pm
Location: GZOverse

Re: navigation changes

Post by GanstaZ »

Main div nav should be set to relative:

Code: Select all

.nav {
    position: relative;
    margin : 0 auto; // or can be whatever you want...
}
Width should be auto:

Code: Select all

.nav li {
    width: auto;
}
Code can be improved, but i think you can handle it on your own & w3schools is a normal site, to get some basic or intermediate knowledge about css. You can find some good examples & info about everything, that you have asked here.
Usus est magister optimus! phpBB pre-Triton & latest php environment.
When answer lies in the question, question becomes redundant!
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

I do not have a .nav { should I add it to my css?

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 {
 position: relative;
    margin : 0 auto; // or can be whatever you want...	
width: auto;
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
GanstaZ
Registered User
Posts: 1187
Joined: Wed Oct 11, 2017 10:29 pm
Location: GZOverse

Re: navigation changes

Post by GanstaZ »

In your html file you have:

Code: Select all

<div class="nav">
That is a nav class, what i posted was for that line.
Usus est magister optimus! phpBB pre-Triton & latest php environment.
When answer lies in the question, question becomes redundant!
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

Like This?

Code: Select all

<style>
.nav {
    position: relative;
    margin : 0 auto; // or can be whatever you want...
}	
	
.nav ul {
list-style: none;
background-color: #21cf20;
text-align: left;
padding: 0;c
margin: 0;
}

.nav li {
 width: auto;	
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 {
position: relative;
margin : 0 auto; // or can be whatever you want...	
width: auto;
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: auto;
}

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

.nav li ul li {
display: block;
}


</style>
User avatar
GanstaZ
Registered User
Posts: 1187
Joined: Wed Oct 11, 2017 10:29 pm
Location: GZOverse

Re: navigation changes

Post by GanstaZ »

Yes.. i don't know if it will fix it or not, but try it and:
w3schools is a normal site, to get some basic or intermediate knowledge about css. You can find some good examples & info about everything, that you have asked here.
+ there is an online editor for testing).. Try it and find out more about css and how it works.
Usus est magister optimus! phpBB pre-Triton & latest php environment.
When answer lies in the question, question becomes redundant!
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

What is Parse error.

Code: Select all

Error: CSS: c: Parse Error.

At line 48, column 9

g: 0;c↩margin: 0;↩}↩↩.nav li {

Error: CSS: Parse Error.

From line 88, column 8; to line 88, column 11

.	↩width: auto;↩bord

Error: CSS: padding-left: only 0 can be a unit. You must put a unit after your number.

From line 106, column 15; to line 106, column 16

ing-left: 10;↩}↩↩/
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navigation changes

Post by Lumpy Burgertushie »

you need to remove this: // or can be whatever you want...

also, it looks like you may be using a text editor with incorrect character settings.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

I removed // or can be whatever you want...

I use Dreamweaver CC to edit.
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

Oh yea. the code above is from w3 validator site.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navigation changes

Post by Lumpy Burgertushie »

Charisma44 wrote: Thu Mar 22, 2018 12:52 am I removed // or can be whatever you want...

I use Dreamweaver CC to edit.
that is probably why you are getting w3 errors.

start over with a new copy of the file. only use a real text editor. do NOT use DW or any other type of wysiwyg web site creator tool.
phpbb is not a normal website and its files are not normal html files etc.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

How am I doing so far?
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>
/* Add a black background color to the top navigation */
.topnav {
    background-color: #21cf20;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #21cf20;
    color: white;
}



</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 class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">Links</a>
   <a href="#about">Provinces</a>
   <a href="#contact">Courses</a>
   <a href="#contact">Snowbirds</a>
   <a href="#contact">Discussion Board</a>
   <a href="#contact">Live Chat</a>
  <a href="#contact">Contact</a>
 
</div>

</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 -->
<!-- menu start -->
</div>

<!-- EVENT overall_header_headerbar_after -->
</div>
<!-- EVENT overall_header_navbar_before -->
<!-- INCLUDE navbar_header.html -->

<!-- menu ends -->
<!-- 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
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navigation changes

Post by Lumpy Burgertushie »

you removed almost all of the css code from the header. however, what you have seems to be working better than it did with all that other css.

all you need to do now is to add your links in the html code and you will be done.

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

ha ha yes, But I have to first add a drop down to the links tab. What I am trying to figure out now.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: navigation changes

Post by Lumpy Burgertushie »

you had it working once before but you have removed most of the code you were using before. just find that drop down code ( the li and ul parts )
and the css that goes with them , put that all back and you should be good to go.

robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Charisma44
Registered User
Posts: 390
Joined: Thu Nov 12, 2015 7:45 pm

Re: navigation changes

Post by Charisma44 »

I downloaded a different menu. So I’ll figure out the drop down in the morning.
Post Reply

Return to “phpBB Custom Coding”