We Keep Coding

bootstrap "mega-dropdown" centering main menu nav items

I am trying to build a main menu navigation with a full width screen drop downs below it. I found an awesome example to build off of, but I cannot seem to figure out how center the main menu items themselves.
Here is what I have so far, See example here : http://codepen.io/ajmajma/pen/ALJbdk .
This works perfectly, however I need those main menu items (home, about, etc..) to be centered.
My first thought was to inline-block them, however this causes some screwy behaviour with the sub menu.
IF I add
.desktop-nav {
text-align: center
}
.menu {
display: inline-block
}
I get the desired centered effect, however the sub menu is confined the the small center size of the ul, and I need it to remain the full width of the page. See behavior here - http://codepen.io/ajmajma/pen/wzYPQm .
Any idea of how to fix this to get desired effect? Thanks!

You could add a text-align:center to the ul and add a display:inline-block to the li. Just remove the float:left from the li and you're good.
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
box-sizing: border-box;
text-align:center;
}
.menu > ul > li {
display: inline-block;
padding: 5px;
margin: 0;
}
http://codepen.io/Founded1898/pen/amREJm

I have found the solution to this:
.desktop-nav {
margin-left: 50%;
}
.menu > ul > li > ul {
margin-left: -50%;
}
If you don't want to set the margin in the desktop, you have to create a something like .iWantThisMenuToCenter {margin-left: 50%}and assign it to the <nav> tag.

Make Element Appear On Minimum Screen Size

I have a bug in my header when I shrink the screen size down. The nav is supposed to disappear (only to reappear if the mobile nav icon is clicked,) which is working fine. However, if I click the mobile nav icon, and then click it again to hide it, the nav stays hidden even when I expand the screen size out again.
I want the nav to show up again when the screen gets to 670px.
CSS
#media screen and (min-width: 671px) {
.nav {
display: block;
}
}
#media screen and (max-width: 670px) {
.navicon {
display: block;
}
.homeiconcontainers {
float: none;
width: 100%;
}
.header {
background: none;
opacity: 1;
}
.pagelinkcontainers {
float: none;
line-height: 50px;
background-color: black;
width: 200px;
padding-right: 0px;
text-align: center;
}
ul {
padding-left: 20px;
}
.nav {
display: none;
}
}
JavaScript
// Show Mobile Navbar Onclick
function MobileMenu (object) {
var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;
//Show nav element
for(var nav in elements) {
if(object!==nav) {
document.getElementById(nav).style.display='none';
}
if(object==nav && mobiledisplay=='block') {
document.getElementById(nav).style.display='none';
}
else {
document.getElementById(nav).style.display='block';
location.hash=pages[nav].title;
document.title=pages[nav].title;
}
}
}
My .nav is somehow getting display: none from either my 670px media query, or from the javascript function. I could also be mis-using the min-width media query, but I'm not sure.
Im assuming you don't need to see my HTML to figure this out, but if you would like to, let me know.

Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible.
#media screen and (min-width: 671px) {
.nav {
display: block !important;
}
Why?
JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that CSS rule has !important.

Responsive dropdown menu conflict

I have been fiddling around with a menu-experiment that is based on 'responsive-nav.js' and trying to add dropdowns to it. All would be fine, but for some reason I am not able to get the dropdowns to appear right. Even with making them to absolute position within a relative container. I am sure it is something simple, but just can't get my head around it.
If I delete the script bit at the bottom it works but this way I loose the toggle-menu.
I created a lint for this:
https://dl.dropboxusercontent.com/u/5791486/dropdown2/index.html
The answer is as suggested below: overflow:visible, but to make the toggle fluid I had to create an extra media queries for this:
.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: visible;
zoom: 1;
}
#media screen and (max-width: 40em) {
.js #nav {
overflow: hidden;
}
}
That was it, Thanks again!!!!

Tou have to set top: 100%; on #nav ul li:hover ul to let the submenu align to the bottom of their parent.
#nav ul li:hover ul {
display: block;
position:absolute;
top:100%;
}
Example: http://jsfiddle.net/UG9cy/

Bug with inside responsive menu

I am beginner in JS.
I found wonderful example of responsive menu, and put code inside functions.php. Menu must works like here http://filamentgroup.com/examples/rwd-nav-patterns/ but i have the bug - dropdown menu shift to the right in my site when I use tablet mode.
I tried to include this menu in my site, based on Bootstrap http://b.pusku.com

UPDATE:
Part of the problem with the fiddle was that the space allotted for the logo image was too wide, so I added the following to correct that:
#logo > img {
width: 25px;
}
To get the dropdown to float left at all times, add:
.nav-menu .nav-primary {
float: left;
clear: none;
}
to the #media screen and (min-width: 910px) rule...
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
.nav-menu .nav-primary {
float: left;
clear: none;
}
}
Once the navigation links collapse to a dropdown, they'll float left. The links will have an offset of 25px on the left because of the following rule in bootstrap.css (on line 728):
ul, ol {
padding: 0;
margin: 0 0 10px 25px; /*specifically this rule*/
}
You can override that, if you like, by adding margin-left: 0; to the .nav-primary ul rule:
.nav-primary ul {
border: 1px solid #e6e6e6;
margin-left: 0; /* add this to override the bootstrap.css rule*/
}
Finally, as the screen width narrows, the dropdown's width seems to stretch the entire width. If this is not a desired effect, add display: inline-block; to the .nav-primary rule:
.nav-primary {
clear: left;
margin: 0 0 2em;
display: inline-block;
}
I've also re-written the javascript that makes the "responsive" navigation collapse to a dropdown using more (appropriately named) variables so you may better understand why the script does what it does:
$(document).ready(function () {
'use strict';
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function () {
var nav = $(this),
navPrimaryTop = nav.offset().top, // top of div.nav-primary
navSkipNavTop = nav.prev().offset().top, // top of p containing a#main
topOfFirstLink = nav.find('li:first-child').offset().top, //top of "What We Done"
topOfLastLink = nav.find('li:last-child').offset().top, //top of "Contact Us"
navBelowSkipNav = navPrimaryTop > navSkipNavTop, //boolean indicating whether div.nav-primary is below the p containing a#main
lastLinkBelowFirstLink = topOfLastLink > topOfFirstLink, //boolean indicating whether "Contact Us" is below "What We Done"
displayAsMenu = navBelowSkipNav || lastLinkBelowFirstLink; // boolean indicating whether to collapse to a dropdown menu
$('body').removeClass('nav-menu');
if (displayAsMenu) {
$('body').addClass('nav-menu');
}
})
// toggle the menu items' visiblity
.find('h3').bind('click focus', function () {
$(this).parent().toggleClass('expanded');
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function () {
$('.nav-primary').trigger('testfit');
});
});
Here's an updated fiddle demonstrating the basics: http://jsfiddle.net/DD7MC/1/
I did not override either the margin-left or the display in the updated fiddle.
ORIGINAL:
I think it's a CSS conflict between rwd-nav.css and bootstrap.css. Try changing the class definition for .nav-menu .nav-primary h3 in rwd-nav.css to:
.nav-menu .nav-primary h3 {
position: absolute;
top: -10px; /* <-- change this line */
left: auto;
right: 0;
display: block;
width: 4em;
height: 3.75em; /* <-- change this line */
background: #ccc url(img/icons.png) no-repeat -205px 45%;
text-indent: -999em;
cursor: pointer;
font-size: inherit; /* <-- add this line */
}
Also, your hosting provider is returning a 404 for url(img/icons.png). You may want to make sure that file exists.

Entire drop-down menu quickly flashes upon page load

I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li>blah
<ul class="sub-menu">
<li>blah</li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});

Set the dropdown menu as display: none in the page's CSS or directly in the element itself using style="display:none". This will hide it as the page loads.

I have the same issue :( except when i used the css to hide it on load, i now have the problem that it never displays! even when hovering over the parent...
Even before i posted my reply i thought id try one more thing
#navigation ul ul{
display:none;
}
instead of
#navigation ul ul li{
display:none;
}
and now it works perfectly

I recommend setting the style to display:none the the li elements in a style sheet, so that the browser knows to render them initially as not displayed. Then, when jQuery loads, the inline style that jQuery adds will override the display style.
ul li {
display:none;
}

Try:
.mobile-menu:not( .mm-menu ) {
display: none;
}
where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.
e.g
<div class="mobile-menu">
<ul>
<li>about</li>
<li>Food</li>
</ul>
</div>