Code: Select all
<style>
.nav {
position: relative;
margin: 0 auto;
font-family: 'Oswald', sans-serif;
font-size: 1.4em;
text-align: left;
}
.nav ul {
list-style: none;
background-color: #21cf20;
padding: 5px;
}
.nav li {
margin: 0 5px;
}
.nav a {
text-decoration: none;
color: #000;
}
.nav a:hover {
color: #ffffff;
}
@media screen and (min-width: 650px) {
.nav li {
width: auto;
display: inline-block;
}
/* Sub Menus.. Index 1 or 2 */
.nav li ul {
position: absolute;
display: none;
z-index: 2;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
</style>
<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>
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}&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 10px;
text-decoration: none;
font-size: 19px;
}
/* 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="../../../../index.html">Home</a>
<a href="#">Links</a>
<a href="../../../../Provinces.html">Provinces</a>
<a href="../../../../Courses.html">Courses</a>
<a href="../../../../Snowbirds.html">Snowbirds</a>
<a href="http://www.empoweredgolfersmanitoba.ca/phpBB3/">Discussion Board</a>
<a href="../../../../Chatroom.html">Live Chat</a>
<a href="../../../../Contact.html">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 -->
GanstaZ wrote: ↑Fri Mar 23, 2018 9:51 pm Wasn't your previous navigation a custom one?) Give me some time i'll edit this post with the code to try.Code: Select all
<style> .nav { position: relative; margin: 0 auto; font-family: 'Oswald', sans-serif; font-size: 1.4em; text-align: left; } .nav ul { list-style: none; background-color: #21cf20; padding: 5px; } .nav li { margin: 0 5px; } .nav a { text-decoration: none; color: #000; } .nav a:hover { color: #ffffff; } @media screen and (min-width: 650px) { .nav li { width: auto; display: inline-block; } /* Sub Menus.. Index 1 or 2 */ .nav li ul { position: absolute; display: none; z-index: 2; } .nav li:hover ul { display: block; } .nav li ul li { display: block; } } </style> <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>
Code: Select all
/* Sub Menus.. Index 1 or 2 */
.nav li ul {
position: absolute;
display: none;
z-index: 2;
}