I have a responsive navigation bar that I have added to a WordPress theme. But I would like a submenu drop-down to be added to my responsive navigation bar but im unsure how to do this. I am new to PHP and WordPress.
HTML
<?php
$args = array(
'theme_location' => 'primary'
);
?>
<?php wp_nav_menu( $args ); ?>
</ul>
Menu
</nav>
CSS
nav {
height: 40px;
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width:1000px;
width: 100%;
height: 40px;
}
nav li {
display: inline;
float: left;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li a:link, a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width : 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Javascript
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
additional CSS attempt
ul.sub-menu { /* this targets all sub menus */
display: none; /* hide all sub menus from view */
position: absolute;
z-index: 10;
top: 40px; /* this should be the same height as the top level menu -- height + padding + borders */
}
ul.sub-menu li { /* this targets all submenu items */
width: 100px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
ul.sub-menu li a { /* target all sub menu item links */
padding: 5px 10px; /* give our sub menu links a nice button feel */
}
ul.sub-menu li:hover {
display: block; /* show sub menus when hovering over a parent */
}
I have adjust some of your css and html, please check its working now.
the main problem is in the height of nav also I have change the position of a#pull to the top of the ul.
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
nav {
width: 100%;
color: #fff;
background: #86c024;
font-size: 11pt;
position: relative;
height: 100%;
overflow: hidden;
}
nav ul {
padding: 0;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
nav li {
display: inline;
float: left;
height: 40px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
nav a {
color: #fff;
display: inline-block;
width: auto;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li a {
padding: 0 10px;
border-right: 1px solid #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li a:link,
a:visited {
color: white
}
nav li:last-child a {
border-right: 0;
}
nav a:hover {
background: #2098d1;
}
nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
font-weight: bold;
background: #2098d1;
}
nav a#pull {
display: none;
}
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
#media only screen and (max-width: 600px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background: #86c024;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('img/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
}
<nav>
Menu
<ul>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</nav>
Related
I can't style my WordPress function correctly, and the sub-menu and menu are displayed together and on top of each other. I want to separate these two, what should I do? My codes are as follows:
i do not know about html vs css code please help me or if you have any details about nav menu in wordpress template so please Guide me
<?php wp_nav_menu( array( 'theme_location' => 'primary_menu', 'container' =>'', 'menu_class' =>'meno' ) ); ?>
<style>
.meno{
list-style-type: none;
padding-right:20px;
width:800px;
}
.meno li{
display: inline-block;
margin-left:50px;
border-radius: 5px 5px 5px 5px;
background-color: #fff;
padding:-3px ;
}
.meno li a {
display: block;
padding: 0;
text-decoration: none;
/* this is the width of the menu items */
line-height: 35px;
/* this is the hieght of the menu items */
/* list item font color */
text-align: center;
}
.meno li li a {
font-size: 80%;
width: 200px;
transition: all 0.2s;
}
.meno li:hover {
background: #e0d5d5;
border-radius: 5px 5px 5px 5px;
transition: all 0.4s;
box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, 0.08), 0 0.25rem 0.75rem rgba(31, 27, 45, 0.08);
}
.meno ul {
padding: 0;
left: 0;
/* hides sublists */
width: 100px;
height: 100px;
transition: all 0.4s;
position: absolute;
display: none;
}
.meno li:hover ul ul {
display: none;
background: #493131;
transition: all 0.4s;
}
.meno li:hover ul {
position: relative;
display:block;
width: 200px;
height: auto;
}
/* shows sublist on hover */
.meno li li:hover ul {
display: block;
/* shows sub-sublist on hover */
margin-left: 200px;
/* this should be the same width as the parent list item */
margin-top: -35px;
/* aligns top of sub menu with top of list item */
background: #8a7c7c;
}
</style>
I have an anchor button that links to a contact page on a website. It is inside a listed item tag and it is stretching the header top and the listed item tag. The anchor button currently looks like this:
<li><div id="contact_us">
FREE Boiler Evaluation
</div></li>
The CSS for the anchor button currently looks like this:
a.red-bg{
display: inline-block;
overflow:hidden;
padding: 0 10px;
}
But the CSS for the header looks like this:
.header-top {
background: #252525;
}
.header-top a {
line-height: 40px;
}
.header-top .header-search a.red-bg {
padding: 0 10px;
display: block;
}
.header-top .container {
position: relative;
}
.header-top ul li {
list-style: none;
}
.header-top ul {
margin: 0;
}
.header-top ul li, .header-search {
float: left;
margin-left: 25px;
}
.header-top ul li a {
color: #f5f5f5;
display: inline-block;
}
.header-top .red-bg {
padding: 0 10px;
}
#header_wrapper ul.social-icons {
float: right;
}
#header_wrapper ul.social-icons li {
float: left;
list-style: none;
margin: 5px;
}
#header_wrapper ul.social-icons li a {
background: url(img/social-icons.png) no-repeat;
width: 27px;
height: 30px;
display: block;
text-decoration: none;
}
#header_wrapper ul.social-icons li.facebook a {
background-position: 0 -40px;
}
#header_wrapper ul.social-icons li.twitter a {
background-position: -27px -40px;
}
#header_wrapper ul.social-icons li.linkedin a {
background-position: -55px -40px;
}
#header_wrapper ul.social-icons li.blog a {
background-position: -84px -40px;
}
#header_wrapper .pull-right ul {
padding: 0 10px;
}
#header_wrapper ul.social-icons {
display: none;
}
How do I get it to fit inside the listed item tag so that it doesn't keep stretching the header or the listed item tag?
You have a div inside the li so I made that a span, but your code doesn't include styling for that id so I'm pretty sure this will fix it. It's not semantically correct to have a block element inside an inline element.
See fix:
.header-top {
background: #252525;
}
.header-top a {
line-height: 40px;
}
.header-top .header-search a.red-bg {
padding: 0 10px;
display: block;
}
.header-top .container {
position: relative;
}
.header-top ul li {
list-style: none;
}
.header-top ul {
margin: 0;
}
.header-top ul li, .header-search {
float: left;
margin-left: 25px;
}
.header-top ul li a {
color: #f5f5f5;
display: inline-block;
}
.header-top .red-bg {
padding: 0 10px;
}
#header_wrapper ul.social-icons {
float: right;
}
#header_wrapper ul.social-icons li {
float: left;
list-style: none;
margin: 5px;
}
#header_wrapper ul.social-icons li a {
background: url(img/social-icons.png) no-repeat;
width: 27px;
height: 30px;
display: block;
text-decoration: none;
}
#header_wrapper ul.social-icons li.facebook a {
background-position: 0 -40px;
}
#header_wrapper ul.social-icons li.twitter a {
background-position: -27px -40px;
}
#header_wrapper ul.social-icons li.linkedin a {
background-position: -55px -40px;
}
#header_wrapper ul.social-icons li.blog a {
background-position: -84px -40px;
}
#header_wrapper .pull-right ul {
padding: 0 10px;
}
#header_wrapper ul.social-icons {
display: none;
}
a.red-bg{
display: inline-block;
background: red;
padding: 0 10px;
}
<ul>
<li><span id="contact_us">
FREE Boiler Evaluation
</span></li>
</ul>
To say that you want a to fit inside li means you want a fixed width of li.
a.red-bg {
display: inline-block;
overflow: hidden;
padding: 0 10px;
border: 1px solid white
}
li {
width: 100px;
background: red;
}
<li>
<div id="contact_us">
FREE Boiler Evaluation
FREE Boiler Evaluation
FREE Boiler Evaluation
FREE Boiler Evaluation
FREE Boiler Evaluation
FREE Boiler Evaluation
</div>
</li>
I am trying to change the text from "Menu" to "Close Menu" when Menu is open. I have no idea how to do it.
This is my HTML:
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label">
<span>☰</span> Menu
</label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
This is my CSS:
/* MENU */
/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
display: none;
font-size: 15pt;
}
/* declarations for the not-responsove-menu */
nav {
width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */
margin-left: -10px;
background: black
}
nav ul {
padding: 0px;
margin-left: -10px;
margin-top: 43px;
}
nav a {
display: block;
background: #FFF;
text-decoration: none;
color: white;
font-size: 15pt;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #FFF;
transition: 0.5s;
}
/* Declarations for the responsive menu 1680px */
#media screen and (max-width: 15360px) {
* {
font-size: 15pt;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 0px;
background: black;
cursor: pointer;
color: #fff;
}
nav {
position: absolute;
top: -9999px;
padding: 0px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
nav a:after {
display: none;
}
nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}
nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: black;
}
nav ul li:hover {
background: none;
}
nav ul li a:hover {
background: black;
color: #11BEE0
}
}
/* END OF MENU */
the easiest way to do this is to actually remove the word "Menu" from the actually html and add two data attributes to the menu that you want to toggle between
so your label would look like this
<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>☰</span></label>
next you will have to toggle the content based on whether your checkbox is checked or not with 2 styles like this
/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
content: attr(data-closed);
}
here is the complete code that you can test
/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
content: "Menu Hide";
display: none;
font-size: 15pt;
}
/* declarations for the not-responsove-menu */
nav {
width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */
margin-left: -10px;
background: black;
}
nav ul {
padding: 0px;
margin-left: -10px;
margin-top: 43px;
}
nav a {
display: block;
background: #FFF;
text-decoration: none;
color: white;
font-size: 15pt;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #FFF;
transition: 0.5s;
}
/* Declarations for the responsive menu 1680px */
#media screen and (max-width: 15360px) {
* {
font-size: 15pt;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 0px;
background: black;
cursor: pointer;
color: #fff;
}
nav {
position: absolute;
top: -9999px;
padding: 0px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
content: attr(data-closed);
}
nav a:after {
display: none;
}
nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}
nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: black;
}
nav ul li:hover {
background: none;
}
nav ul li a:hover {
background: black;
color: #11BEE0
}
}
/* END OF MENU */
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>☰</span></label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
There is a similar question to yours.
if you are insistent to replace text content with css, you can visit the link below.
How to change content on hover
otherwise it's highly recommended to use javascript instead of css to replace or toggle content.
$(document).on("click","#menu-label",function(){
var $this = $(this);
if ($this.text() === "Menu"){
$this.text("Close")
}else {
$this.text("Menu")
}
});
/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
display: none;
font-size: 15pt;
}
/* declarations for the not-responsove-menu */
nav {
width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */
margin-left: -10px;
background: black
}
nav ul {
padding: 0px;
margin-left: -10px;
margin-top: 43px;
}
nav a {
display: block;
background: #FFF;
text-decoration: none;
color: white;
font-size: 15pt;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #FFF;
transition: 0.5s;
}
/* Declarations for the responsive menu 1680px */
#media screen and (max-width: 15360px) {
* {
font-size: 15pt;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 0px;
background: black;
cursor: pointer;
color: #fff;
}
nav {
position: absolute;
top: -9999px;
padding: 0px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
nav a:after {
display: none;
}
nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}
nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: black;
}
nav ul li:hover {
background: none;
}
nav ul li a:hover {
background: black;
color: #11BEE0
}
}
/* END OF MENU */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label" ><span>☰</span> <span id="menu-label">Menu</span></label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
Since you are already using the checkbox hack for your menu, we can use that to show and hide text inside the label, too.
Inside the label, we add two <span>'s with the according text:
<label for="responsive-nav" class="responsive-nav-label">
<span>☰</span>
<span class="open">Close Menu</span>
<span class="closed">Menu</span>
</label>
As we want "Close Menu" to initially be hidden, we add
.open {
display: none
}
to our CSS.
When the checkbox is checked (meaning the menu is visible), just hide "menu" and display "Close Menu":
input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .closed {
display: none;
}
input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .open {
display: inline;
}
Here's a jsfiddle with the working code.
This question already has answers here:
Centering a css dropdown menu
(2 answers)
Closed 8 years ago.
How can I center the menu/navigation in header?
PHP file looks like this
<div class="menu-and-contact-wrap">
<?php
$header_phone = get_option('theme_header_phone');
if( !empty($header_phone) ){
echo '<h2 class="contact-number"><i class="fa fa-phone"></i>'.$header_phone.' <span class="outer-strip"></span></h2>';
}
?>
<!-- Start Main Menu-->
<nav class="main-menu">
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu',
'menu_class' => 'clearfix'
));
?>
</nav>
<!-- End Main Menu -->
</div>
And CSS file looks like this
.menu-and-contact-wrap {
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu {
margin-top: 42px;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
.main-menu ul {
list-style: none;
margin: 0;
}
.main-menu ul li {
float: left;
position: relative;
}
.main-menu ul li.current-menu-ancestor > a, .main-menu ul li.current-menu-parent > a, .main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a, .main-menu ul li:hover > a {
color: white;
background-color: #ec894d;
}
.main-menu ul li a {
font-family:"Lato", Helvetica, Arial, sans-serif;
color: #afb4b5;
font-size: 14px;
display: block;
text-decoration: none;
padding: 14px 10px;
}
.main-menu ul li ul {
display: none;
background-color: #ec894d;
width: 220px;
padding: 0;
position: absolute;
top: 48px;
left: 0;
z-index: 888;
}
.main-menu ul li ul li {
float: none;
margin: 0;
}
.main-menu ul li ul li:hover > a {
background-color: #dc7d44;
}
.main-menu ul li ul li a {
font-size: 13px;
padding: 10px 10px 12px;
color: white;
}
.main-menu ul li ul li ul {
background-color: #dc7d44;
top: 0px;
left: 220px;
}
.main-menu ul li ul li ul li:hover > a {
background-color: #d0743d;
}
.main-menu .responsive-nav {
display: none;
margin: 0px auto;
width: 100%;
padding: 5px;
}
I tried to change them as you can see above in CSS, but without any success
In default they looked like this:
Menu-and-contact-wrap looked like this
position: absolute;
bottom: 0;
right: 0;
And Main-menu looked like this before
margin-top: 42px;
float: right;
Thank you!
There are a few ways. Here are two.
Set a non-100% width on .main-menu and then add margin: 0 auto
Remove the floats from .main-menu ul li, add display: inline-block to it and add text-align: center to .main-menu
Anyone can help me figure out how to stretch out my menu like this http://heatfreehair.com/
Here's how mine is looking right now http://dev1.envisionwebdesign.co/
Below is the php code for the wordpress based site.
<header id="header" class="col-full">
<nav id="navigation" class="col-full" role="navigation">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav fl">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><?php _e( 'Home', 'woothemes' ); ?></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>
</nav><!-- /#navigation -->
</header><!-- /#header -->
Below is the css
#navigation {
float: left;
clear: both;
margin-bottom: 0;
display: none;
}
#header #navigation {
display: block !important;
margin-top: 150px;
}
#header #navigation ul.nav {
float: left;
}
#header #navigation ul.nav > li a {
background: #000000;
float: left;
height: 30px;
line-height: 30px;
display: block;
font-family: "Agency", Verdana;
font-size: 21px;
font-weight: normal;
color: #ffffff;
height: 30px;
padding: 0 44px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
text-transform: uppercase;
}
#header #navigation ul.nav > li a:hover {
border-color: #e8e3e5;
background: #000000;
color: #f91483;
}
#header #navigation ul.nav > li:hover a {
background: #fff;
}
#header #navigation ul.nav > li.current-menu-item > a,
#header #navigation ul.nav > li.current_page_item > a {
color: #f91483;
}
#header #navigation ul.nav > li.parent a {
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#header #navigation ul.nav > li.parent a:after {
font-family: 'Agency';
display: inline-block;
font-size: .857em;
margin-left: .618em;
content: ";";
color: #ffffff;
font-weight: normal;
}
#header #navigation ul.nav > li.parent a:hover:before {
content: "";
display: block;
height: 2px;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
background: #fff;
z-index: 99999;
}
#header #navigation ul.nav > li.parent:hover a:before {
content: "";
display: block;
height: 2px;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
background: #fff;
z-index: 99999;
}
#header #navigation ul.nav > li.parent:hover a:after {
color: #ff007b;
}
#header #navigation ul.nav > li.parent ul li a:after {
visibility: hidden;
}
#header #navigation ul.nav > li.parent ul li.parent a:after {
visibility: visible;
content: "]";
float: right;
}
#header #navigation ul.nav > li.parent ul li.parent ul li a:after {
visibility: hidden;
}
#header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after {
visibility: visible;
content: "]";
}
#header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after {
visibility: hidden;
}
#header #navigation ul.nav ul {
border: none;
margin-top: -1px;
padding: .372em 0;
box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4);
-webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4);
background: #fff;
}
#header #navigation ul.nav ul ul {
left: 100%;
top: -0.372em;
}
h3.nav-toggle {
display: none;
}
This should get you on your way. Trick is to have your nav inside a dive that stretches. Make the nav relative with a set width and then set margin as shown.
the parent div with class fullstretch is automatically width=100% towards the parent conbtainer.
<div class="fullstretch">
<nav></nav>
</div>
body {
margin:0;
}
.fullstretch {
position: relative;
background: #000;
padding: 5px 0;
}
.fullstretch nav {
width: 800px;
position: relative;
margin: 0 auto;
background: #fff;
}
There are 2 ways
pure css
Add this
width: 100%
to your navigation css selector. But if you load your window with not occupying the
whole screen, and then maximize it. you will notice that it doesn't keep intact with the maximum width. Unless if you reload the page again with the maximum window size of course.
However
with javascript
Get the window width
Set the navigation to be the same width as window width (make this
as a function. say function A)
Add event handler to window so that when size window change --> run function A
Hope this gives you an idea for your planning.