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.

Change li a style using javascript

I have a menu which i need to change li a style of this:
document.getElementById(li).style.background ="red";
CSS of this is:
.menu, .menu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 191px;
background ="blue"
}
.menu li{
position: relative;
}
.menu li a{
border-radius: 5px;
background: white url(../graphics/glossyback.gif) repeat-x bottom left;
font: 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
It is changing background but only in .menu li ul.
I want to change background in .menu li a.
Appreciate your help.

You are missing quotes. document.getElementById('li'); will return the first element with the id li
You can change its background like:
document.getElementById('li').style.background ="red";
For selecting multiple elements with a class name li you can use
document.getElementsByClassName('li')
For more accurate selections you can use:
document.querySelectorAll('.menu li a')
which returns a list of matching nodes on which you can iterate and set the background as follows:
var elements = document.querySelectorAll('.menu li a');
elements.forEach(el => el.style.background = 'red')

I recommend using something like jQuery because it will do a lot of the heavy lifting for you. Also it will make it compatible with other browsers, which you will find overtime is going to be one of the most time consuming things of web development.
But to answer your question to do it in javascript you can do the following:
document.querySelectorAll('#li a').style.background = "red";

Your CSS here .menu li{ suggests that the li is an element and not an id assigned to another element. So you should use
var li = document.getElementsByTagName("li");
for(var i = 0; li[i]; i++){
li[i].style.background = "red"; //works for multiple `<li>` elements on the page
}
Or to get specifically the exact results, use:
var els = document.querySelectorAll(".menu li ul, .menu li a"); // and the same for loop follows
Demo

html - css block Width/Height

I have the following CSS code:
#nav {}
#nav a {
position: relative;
display: inline-block;
color: #F0F0F0;
width: 1em;
height: 2em;
line-height: 0.9em;
}
#nav a.icon:before { padding-right: 0;}
<nav id="nav">
<span>Home</span>
</nav>
But if the text is longer than 10 characters, it is automatically making a paragraph, making the text out of the original box. How can I prevent this?
Edit
All i want the background box in the screenshot to get bigger in width as the text is longer
http://prntscr.com/2cd973

if your aim is to display it all on the same line, you just need to remove width:1em; from #nav a
if you want to hide the text that is overflowing add overflow:hidden; to #nav a
if you want the a tag to adapt height and width to its content remove width:1em; and height:2em; from #nav a

You can display your content as a table-row. Then your links will be displayed as new columns in a table.
#nav {
display: table-row;
}
You can see the results on this fiddle.

Add this in #nav :
word-wrap:break-word;

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>

How to get dropdown menu to open/close on click rather than hover?

I am very new to javascript and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover.
The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module).
The gray menu is part of a menu and the language menu is not.
I have a jquery import as well which can be found in the view source of the above link.
My Javascript Code:
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li").hover(function() {
$('ul:first',this).css('display', 'block');
}, function() {
$('ul:first',this).css('display', 'none');
});
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
My CSS:
#lang-selector
{
font-size: 11px;
height: 21px;
margin: 7px auto 17px auto;
width: 186px;
}
#lang-selector span
{
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a
{
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a
{
width: 186px;
}
#lang-selector ul ul
{
display: none;
position: absolute;
}
#lang-selector ul ul li
{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a
{
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 10px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a
{
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover
{
background: #c4262c;
color: #fff;
}
My HTML:
<div id="lang-selector">
<ul>
<li>
Choose a Language
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
</ul>
</li>
</ul>
</div>
Thanks!

$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
Using toggle will require you to click to open then reclick to close

I would do something like this...
$(function() {
$("#lang-selector > li").click(function() {
$('ul:first',this).toggleClass('active');
});
});
And, then, in the CSS add this:
.active { display: block; }
<< EDIT: Removed "ul" from ".active" class for CSS rendering efficiency >>
Also make sure that the sub-nav <ul> has "display: none;" on it by default in your CSS.
This will make it so that clicking an <li> tag in #lang-selector, but not in any sub-nav <ul> tags will either open or close the sub-nav, depending on it's current state.
If you're worried about the accessibility of having "display: none" on the sub-nav by default, you can do something like this...
$(function() {
$("#lang-selector li ul").addClass("hidden");
$("#lang-selector li").click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
<< EDIT: Altered selectors to match example provided, turned "this" into jQuery object. >>
And then also add this to the CSS
.hidden { display: none; }
In this scenario, you have the <ul> showing by default, then when the document loads, jQuery adds the "hidden" class to all of them to hide them, then on the click of the <li> it will toggle the hidden and active classes, displaying them or hiding them.
You'll also need to remove your current "display: none" from your #lang-selector ul ul in CSS, otherwise it takes priority over the hidden / active classes.

search this $("#lang-selector li").hover and replace with
$("#lang-selector li").click

.hover, .click, .something, are all triggers, view this link:
Jquery Events
to learn more about events in Jquery!
Ps: sushil bharwani (vote it), is right, just change your .hover by the .click

if you need two functions for a click event, try .toggle
i'm using this:
$('.triggerlist').toggle(function(e) {
e.preventDefault();
$(this).find('ul').fadeIn();
},function() {
$(this).find('ul').fadeOut();
});
Which allows me to do more stuff on the 2 functions than just the .click with its 1 function.