Navigation Alignment Problems - javascript

Is it possible with css or maybe javascript/jQuery-manipulation to center some navigation items within the same div container, while other itmes in this container (last three) should be on the right edge of the navbar? I've tried it with flexbox and with inline-block/text-align center. I was able to center the whole div container. But when I moved the last three divs to the right, the remaining items stayed in their position. Based on the fact, that the three items now are on the right side, the width of the centered navbar changed and it should actually move a little bit to the right to be centered again.
Making new wrap elements around these centered and right side elements would be the last choice, since I am running on wordpress with php-menues. Therefore, changing the markup would maybe not so easy, like a simple css or javascript/jquery solution.
You may have a look at the fiddle below the posted markup to understand me better ;)
Default HTML-Markup:
<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin- bottom="10px" data-margin-left="0px" data-margin-right="0px">
<a class="logo-link" href="http://stackoverflow.com/">
<img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
</a>
</div>
<div class="main-menu">
<ul id="menu-mainnav" class="menu">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
<a href="/link1/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
<a href="http://stackoverflow.com/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
<a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
</span>
</a>
</li>
</ul></div>
</div>
Default CSS:
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 94.44444%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
float: right;
position: relative;
z-index: 200;
overflow: hidden;
}
#menu-mainnav {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu-mainnav > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right:11px;
}
#menu-mainnav > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
JSFiddle-Example: https://jsfiddle.net/tz0atc4o/1/
Update:
Here a fiddle, where I've tried the text-align and inline solution. You may read the CSS-Comments, so you are able to test the thing, when the whole div is centered. In this case just comment out the last css rule. In contrast the the whole centered div, I am not sure if the items are really centered, when the last three are floated to right :/
https://jsfiddle.net/37gc2v9x/
Thanks in advance!


add float: right to the last items and others make display: inline-block; and float:none; then only change .menu to text-align: center; and width: 100%;


You can handle the last three li by nth-child selector and float them to right.


if you don't get it right here's something for you to work around.
<style>
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 120%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
float: right;
position: relative;
z-index: 200;
overflow: hidden;
height: 50px;
}
#menu-mainnav {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu-mainnav > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right:11px;
}
#menu-mainnav > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
.spacer {
width: 30%;
}
</style>
<div class="row">
<div class="logo" data-margin-top="34px" data-margin- bottom="10px" data-margin-left="0px" data-margin-right="0px"> <a class="logo-link" href="http://stackoverflow.com/"> <img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="38" width="51"> </a> </div>
<table width="92%" border="0">
<tr>
<td width="85%" height="38"><table width="109%" height="25" border="0" align="right">
<tr>
<td width="47%" height="21"> </td>
<td width="53%" align="right"> <ul id="menu-mainnav" class="menu" style="float:none;">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
</ul></td>
</tr>
</table></td>
<td width="15%" align="left"><table width="213" border="0" align="right" class="menu">
<tr>
<td width="56%" height="21" align="right"><ul id="menu-mainnav" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <span class="menu-text">TO RIGHT </span></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <span class="menu-text">TO RIGHT </span></li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT </span></li>
</ul></td>
</tr>
</table></td>
</tr>
</table>
</div>
<p> </div>
</div></p>


Try this:
Divide the menu into two parts.
Simplify the .main-menu class.
Use position:absolute; left:0; right:0; to extend the block to the width of its parent.
Add text-align: center; to place items in the center of the block.
Please check the result: https://jsfiddle.net/glebkema/0on8za7q/
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 94.44444%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
position: relative;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.menu > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right: 11px;
}
.menu > li {
float: none;
display: inline-block;
}
.menu > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
.menu-center {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.menu-right {
float: right;
}
<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin-bottom="10px" data-margin-left="0px" data-margin-right="0px">
<a class="logo-link" href="http://stackoverflow.com/">
<img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
</a>
</div>
<div class="main-menu">
<ul id="menu-mainnav-1" class="menu menu-center">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
<a href="/link1/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
<a href="http://stackoverflow.com/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
</ul>
<ul id="menu-mainnav-2" class="menu menu-right">
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
<a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
</span>
</a>
</li>
</ul>
</div>
</div>
</div>

Related

Div is not correctly rendered on Safari 10.0.1 (like if there is an overflow:hidden somewhere but there isn't)

I have a sub-menu that shows when user hovers the main menu item. It works fine in all browsers except Safari (i have version 10.0.1).
I've looked deeply into the code but didn't find any solution. It seems like there is some kind of overflow issue somewhere but I'm not able to find where.
This is the expected behaviour on Chrome:
Working menu on Chrome
This is the result on Safari:
Issue on Safari
I did some research here on Stackoverflow but didn't find anything useful, mostly because I don't even know what keywords to use.
This is the website: http://stage.federicalotti.com/
Html code:
<div class="nav-wrap">
<nav id="nav">
<div class="container">
<div class="main-menu">
<ul id="menu-menu-principale" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-16">
<a href="http://stage.federicalotti.com/">
<span class="menu-text">Homepage</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
<a href="http://stage.federicalotti.com/biografia/">
<span class="menu-text">Biografia</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-24" class="no-link menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24">
<a href="#">
<span class="menu-text">Repertorio</span>
<span class="menu-arrow"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
<a href="http://stage.federicalotti.com/lista-brani/">
<span class="menu-text">Lista brani</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
<a href="http://stage.federicalotti.com/proposte-concertistiche/">
<span class="menu-text">Proposte concertistiche</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
<a href="http://stage.federicalotti.com/concerti/">
<span class="menu-text">Concerti</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48">
<a href="#">
<span class="menu-text">Media</span>
<span class="menu-arrow"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
<a href="http://stage.federicalotti.com/fotografie/">
<span class="menu-text">Fotografie</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
<a href="http://stage.federicalotti.com/audio-files/">
<span class="menu-text">Audio files</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
<a href="http://stage.federicalotti.com/riprese-video/">
<span class="menu-text">Riprese video</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
<a href="http://stage.federicalotti.com/rassegna-stampa/">
<span class="menu-text">Rassegna stampa</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
<a href="http://stage.federicalotti.com/news/">
<span class="menu-text">News</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
<a href="http://stage.federicalotti.com/contatti/">
<span class="menu-text">Contatti</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</div><!-- .main-menu -->
<div class="search-bar-mobile">
<div class="container">
<form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
<label>
<span class="screen-reader-text">Cerca:</span>
<input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
</label>
<input type="submit" class="search-submit" value="Cerca">
</form>
</div><!-- .container -->
</div><!-- .search-bar-mobile -->
</div><!-- .container -->
</nav>
<div class="search-bar">
<div class="container">
<form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
<label>
<span class="screen-reader-text">Cerca:</span>
<input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
</label>
<input type="submit" class="search-submit" value="Cerca">
</form>
</div><!-- .container -->
</div><!-- .search-bar -->
</div><!-- .nav-wrap -->
Sass code:
/*
* nav
*/
.nav-wrap {
perspective: 1000px;
}
#nav {
position: absolute;
background: #FFF;
left: 0;
top: 0;
height: 80px;
width: 100%;
border-top: 1px solid #f1f1f1;
z-index: 5;
box-shadow: 0 0 145px 0 rgba(0,0,0,0.17);
visibility: hidden;
opacity: 0;
transform: rotateX(-30deg);
transform-origin: top;
transition: 0.2s;
&.open {
visibility: visible;
opacity: 1;
transform: rotate(0);
}
}
.main-menu {
text-align: center;
> ul > li {
list-style: none;
display: inline-block;
line-height: 80px;
padding: 0 20px;
position: relative;
> a:link,
> a:visited {
display: block;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #000;
transition: 0.1s;
}
> a:hover {
color: $verde;
}
&.no-link {
> a:hover {
cursor: default;
}
}
> .sub-menu {
position: absolute;
background: transparent;
width: 320px;
padding: 2px 0;
top: 80px;
left: -10px;
display: none;
> li {
list-style: none;
display: block;
padding: 2px 0;
line-height: normal;
> a:link,
> a:visited {
display: block;
position: relative;
width: 100%;
background: #FFF;
color: #000;
letter-spacing: 1.2px;
font-size: 13px;
padding: 22px 30px;
box-sizing: border-box;
text-align: left;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.11);
opacity: 0;
transform: translateY(30px);
}
> a:hover {
color: $verde;
}
}
}
}
}
jQuery code (I'm using velocity.js):
qode = {
window: $(window),
html: $('html'),
body: $('body'),
nav: $('#nav'),
burgerWrap: $('.burger-wrap'),
searchBar: $('.search-bar'),
header: $('#header'),
wrapper: $('#wrapper')
};
/*
* Mouse enter animation
*/
qode.body.on('mouseenter', '.main-menu > ul > li', function(){
if ( qode.wrapper.width() > 1024 ) {
var self = $(this),
subMenu = self.find('> .sub-menu'),
elements = self.find('> .sub-menu > li a');
subMenu.stop().fadeToggle(0);
elements.stop().each(function(index){
$(this).stop();
$(this).velocity({
opacity: [ 1, 0 ],
translateY: [ 0, '30px' ]
}, {
delay: 75 * index,
duration: 200
});
});
} // if wrapper width
});
/*
* Mouse leave animation
*/
qode.body.on('mouseleave', '.main-menu > ul > li', function(){
if ( qode.wrapper.width() > 1024 ) {
var self = $(this),
subMenu = self.find('> .sub-menu'),
elements = self.find('> .sub-menu > li a');
$( elements.get().reverse() ).stop().each(function(index){
$(this).velocity({
opacity: [ 0, 1 ],
translateY: [ '30px', 0 ]
}, {
delay: 75 * index,
duration: 200,
complete: function(elems){
if ( elements.length === ( index + 1 ) ) {
subMenu.stop().fadeToggle(0);
}
}
});
});
} // if wrapper width
});

You're not setting the z-index on .open. I'm guessing in Safari it inherits in a different way?
&.open {
visibility: visible;
opacity: 1;
transform: rotate(0);
z-index:6; // Make sure the z-index is higher as the one of the page content.
}

Display dropdown menu on hover - not working

Simple problem: I have a nav menu, it shows sub menus when clicked on the '+' beside menu item. BUT IT SHOULD ALSO show drop down menu when hovered.
I think the problem might be:
a) Am I not targeting the right elements
b) is the toggle approach wrong?
New to javascript so I am not sure what is the issue here.
I believe my script is wrong. not sure what the problem is, please help
/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
$(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on");
});
// Sub menu drop down
$(".dropdown-toggle").click(function() {
$(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});
/* NAVIGATION ON HOVER */
// Sub menu drop down
$(".dropdown-toggle").hover(function() {
$(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on");
});
/*
# HEADER
*/
*,
html {
margin: 0;
font-size: 16px;
}
.site-header {
background-color: black;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-navigation {
padding: 2rem;
background-color: red;
}
/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
display: none;
}
*/
/* Menu styles */
.main-navigation .sub-menu {
display: none;
}
.sub-menu.toggle-on {
display: block;
}
.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
list-style: none;
}
.main-navigation ul li a {
color: #fff;
text-decoration: none;
}
/* First Highrarchy */
.main-navigation ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.main-navigation ul li {
margin-right: 2rem;
}
/*.dropdown-toggle:hover {
display: block;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="masthead" class="site-header">
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title">LOGO</p>
</div>
</div>
<!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="dropdown-toggle" aria-expanded="false">Primary Menu</button>
<div class="menu-test-container">
<ul id="primary-menu" class="menu" aria-expanded="true">
<li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
Services
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
Commercial
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
Rural
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
Electrical
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
Residential
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083">News Updates</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
Projects
</li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
Blog
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
About
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
News Updates
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- #site-navigation -->
<link rel="stylesheet" type="text/css" href="style.css">
</header>

The menu only opens when hovering over the button. Hence, when even hovering over the menu itself, the menu closes. You can add the following
$(".sub-menu").hover(function() {
$(this).addClass("toggle-on");
});
$(".sub-menu").mouseleave(function() {
$(this).removeClass("toggle-on");
});
The menu keeps jumping and causes UI changes since it is not absolute. You may add the following
.sub-menu {
position: absolute;
background-color: #000;
margin-top: -26px;
margin-left: -38px;
}
Below is an updated snippet.
/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$(".dropdown-toggle").click(function() {
$(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on");
});
// Sub menu drop down
$(".dropdown-toggle").click(function() {
$(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
});
/* NAVIGATION ON HOVER */
// Sub menu drop down
$(".dropdown-toggle").hover(function() {
$(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on");
});
$(".sub-menu").hover(function() {
$(this).addClass("toggle-on");
});
$(".sub-menu").mouseleave(function() {
$(this).removeClass("toggle-on");
});
/*
# HEADER
*/
*,
html {
margin: 0;
font-size: 16px;
}
.site-header {
background-color: black;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-navigation {
padding: 2rem;
background-color: red;
}
/*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul {
display: none;
}
*/
/* Menu styles */
.main-navigation .sub-menu {
display: none;
}
.sub-menu.toggle-on {
display: block;
}
.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
list-style: none;
}
.main-navigation ul li a {
color: #fff;
text-decoration: none;
}
/* First Highrarchy */
.main-navigation ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.main-navigation ul li {
margin-right: 2rem;
}
.sub-menu {
position: absolute;
background-color: #000;
margin-top: -26px;
margin-left: -38px;
}
/*.dropdown-toggle:hover {
display: block;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="masthead" class="site-header">
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title">LOGO</p>
</div>
</div>
<!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="dropdown-toggle" aria-expanded="false">Primary Menu</button>
<div class="menu-test-container">
<ul id="primary-menu" class="menu" aria-expanded="true">
<li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035">
Services
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076">
Commercial
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082">
Rural
<button class="dropdown-toggle toggled-on" aria-expanded="true">
<span class="dropdown-symbol">-</span>
</button>
<ul class="sub-menu toggled-on">
<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081">
Electrical
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079">
Residential
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083">News Updates</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084">
Projects
</li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045">
Blog
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078">
About
<button class="dropdown-toggle" aria-expanded="false">
<span class="dropdown-symbol">+</span>
</button>
<ul class="sub-menu">
<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099">
News Updates
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- #site-navigation -->
<link rel="stylesheet" type="text/css" href="style.css">
</header>

Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)

Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}

Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.

Bootstrap responsive multi-level navigation menu

I have coded a multi-level navigation menu for bootstrap. It works well in 1200px and above. But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked.
For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again).
How can I achieve this?
This is the HTML:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li class="dropdown">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Offers/Fees <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Patients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li>Blog</li>
<li>Referrals</li>
<li>Contact</li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
The CSS:
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
#media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
#media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I made a JSFiddle for this:
https://jsfiddle.net/Lefosx46/

I took a look at your code. There's a lot going on, so while my answer should work there may be more efficient ways of doing it. It might at least point you in the right direction.
There seemed to be an issue with:
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
I removed that and added:
#media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/
Apologies if I've misunderstood your question!

Dropdown menu bootstrap multilevel

I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}

Categories

Resources