I just want to wrap a div around main menu with sub-menu in WordPress template, how can I reach it maybe with navwalker?
My menu:
<ul id="menu-1" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-38">menu1</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-42">menu2
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-69">a</li>
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-68">b</li>
</ul>
</li>
</ul>
After wrapping it, it should look like:
<ul id="menu-1" class="menu">
<div class=wrap1 ">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-38 ">menu1</li>
</div>
<div class=wrap1">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-42">menu2
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-69">a</li>
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-68">b</li>
</ul>
</li>
</div>
</ul>
Maybe this could help you:
const menu1 = document.getElementById("menu-1").innerHTML;
const new_menu1 = "<div id='wrap1'>" + menu1 + "</div>";
document.getElementById("menu-1").innerHTML = new_menu1;
<ul id="menu-1" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-38">menu1</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-42">menu2
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-69">a</li>
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-68">b</li>
</ul>
</li>
</ul>
Related
I am trying to add scroll to my sub menu via CSS without horizontal one, only vertical.
But when I remove horizontal my other sub menu inside the first one breaks and I dont see it at all.
Please help me.
Here is my menu html code:
<div class="header-col header-center hidden-for-sm"><span class="separator"></span>
<ul id="menu-main-menu" class="main-menu mega-menu menu-hover-line show-arrow">
<li id="nav-menu-item-3106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-143 current_page_item active narrow">Home</li>
<li id="nav-menu-item-3138" class="menu-item menu-item-type-post_type menu-item-object-page narrow">O nama</li>
<li id="nav-menu-item-15113" class="subMenu1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub narrow sub-ready">SHOP
<div class="popup" style="display: block;">
<div class="inner" style="">
<ul class="sub-menu">
<li id="nav-menu-item-16752" class="menu-item menu-item-type-custom menu-item-object-custom" data-cols="1">Novosti</li>
<li id="nav-menu-item-16663" class="menu-item menu-item-type-post_type menu-item-object-page" data-cols="1">Akcije</li>
<li id="nav-menu-item-15809" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Sjajevi i baze</li>
<li id="nav-menu-item-18250" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Gelovi
<ul class="sub-menu">
<li id="nav-menu-item-27918" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Clear gelovi</li>
<li id="nav-menu-item-27919" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Cover gelovi</li>
<li id="nav-menu-item-27917" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Babyboomer gelovi</li>
<li id="nav-menu-item-27922" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">French gelovi</li>
<li id="nav-menu-item-27920" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Exclusive gelovi</li>
</ul>
</li>
<li id="nav-menu-item-15786" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Babe lak
<ul class="sub-menu">
<li id="nav-menu-item-15787" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Babe</li>
<li id="nav-menu-item-15788" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Glitter Babe</li>
<li id="nav-menu-item-15796" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">4in1 Babe</li>
<li id="nav-menu-item-15797" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Collection Babe</li>
</ul>
</li>
<li id="nav-menu-item-16838" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Primeri i tekućine
<ul class="sub-menu">
<li id="nav-menu-item-25736" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Acetoni i Cleaneri</li>
<li id="nav-menu-item-19601" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Primeri i priprema nokta</li>
<li id="nav-menu-item-25735" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ulja za kutikulu</li>
</ul>
</li>
<li id="nav-menu-item-15805" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Rašpe
<ul class="sub-menu">
<li id="nav-menu-item-15807" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Rašpe</li>
<li id="nav-menu-item-15806" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Polir blokovi</li>
</ul>
</li>
<li id="nav-menu-item-15808" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Šablone</li>
<li id="nav-menu-item-27530" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Tipse i ljepilo</li>
<li id="nav-menu-item-17082" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Kistovi
<ul class="sub-menu">
<li id="nav-menu-item-21977" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Gel</li>
<li id="nav-menu-item-21978" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Nail Art</li>
<li id="nav-menu-item-21981" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ostalo</li>
</ul>
</li>
<li id="nav-menu-item-15798" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Metalni pribor</li>
<li id="nav-menu-item-17127" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Električna oprema
<ul class="sub-menu">
<li id="nav-menu-item-27713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Električna oprema</li>
<li id="nav-menu-item-27716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Nastavci comby manikura</li>
<li id="nav-menu-item-27717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Nastavci skidanje gela</li>
<li id="nav-menu-item-17232" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dodatna oprema</li>
</ul>
</li>
<li id="nav-menu-item-15791" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Dodatna oprema
<ul class="sub-menu">
<li id="nav-menu-item-16959" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Display</li>
<li id="nav-menu-item-27608" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Četkice za prašinu</li>
<li id="nav-menu-item-16958" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ostalo</li>
</ul>
</li>
<li id="nav-menu-item-15789" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Ukrasi
<ul class="sub-menu">
<li id="nav-menu-item-16522" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Aurora prah</li>
<li id="nav-menu-item-15816" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ukrasi u kolutu</li>
<li id="nav-menu-item-21754" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Cirkoni</li>
<li id="nav-menu-item-27824" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Folije</li>
<li id="nav-menu-item-15818" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Glitteri</li>
</ul>
</li>
<li id="nav-menu-item-19653" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">MERCH</li>
<li id="nav-menu-item-15792" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Fashion
<ul class="sub-menu">
<li id="nav-menu-item-15793" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Majice i hudice</li>
<li id="nav-menu-item-15799" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Maskice</li>
<li id="nav-menu-item-15801" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Pregača</li>
<li id="nav-menu-item-15800" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ostalo</li>
</ul>
</li>
<li id="nav-menu-item-15802" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Gift card</li>
<li id="nav-menu-item-15795" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Trepavice
<ul class="sub-menu">
<li id="nav-menu-item-15813" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Volumenske i klasične</li>
<li id="nav-menu-item-15812" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Pincete</li>
<li id="nav-menu-item-15811" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ljepila</li>
<li id="nav-menu-item-15810" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dodatna oprema</li>
</ul>
</li>
<li id="nav-menu-item-18737" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Zadnji artikli – 2mBeauty
<ul class="sub-menu">
<li id="nav-menu-item-18971" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">2mBeauty Gelovi</li>
<li id="nav-menu-item-20365" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Sjajevi i baze</li>
<li id="nav-menu-item-20370" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Tekućine 2mBeauty</li>
<li id="nav-menu-item-18972" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">Color Gel
<ul class="sub-menu">
<li id="nav-menu-item-20032" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Carving</li>
<li id="nav-menu-item-20033" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Effect gel</li>
<li id="nav-menu-item-20034" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">HC Magic Art Liquid</li>
<li id="nav-menu-item-20035" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Plasteline</li>
<li id="nav-menu-item-20036" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Spider</li>
<li id="nav-menu-item-20037" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Stamping</li>
<li id="nav-menu-item-21466" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Termo</li>
</ul>
</li>
<li id="nav-menu-item-18739" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">Mini Me
<ul class="sub-menu">
<li id="nav-menu-item-20025" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">All in</li>
<li id="nav-menu-item-20026" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Cracking</li>
<li id="nav-menu-item-20027" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Elastic Base</li>
<li id="nav-menu-item-20028" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Galaxy</li>
<li id="nav-menu-item-20029" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Holo</li>
<li id="nav-menu-item-20030" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Intense</li>
<li id="nav-menu-item-20031" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Metal</li>
<li id="nav-menu-item-20270" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">MAGNET EFFECT 5D</li>
</ul>
</li>
<li id="nav-menu-item-20345" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Acryl Gel</li>
<li id="nav-menu-item-20373" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dip&Go</li>
<li id="nav-menu-item-20392" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Rašpe 2mBeauty</li>
<li id="nav-menu-item-20393" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dodatna oprema</li>
</ul>
</li>
<li id="nav-menu-item-15794" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Oklagije za maderoterapiju
<ul class="sub-menu">
<li id="nav-menu-item-15804" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Oklagije za tijelo</li>
<li id="nav-menu-item-15803" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Oklagije za lice</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li id="nav-menu-item-16135" class="menu-item menu-item-type-post_type menu-item-object-page narrow">Blog</li>
<li id="nav-menu-item-15524" class="menu-item menu-item-type-post_type menu-item-object-page narrow">Cjenik</li>
<li id="nav-menu-item-19274" class="menu-item menu-item-type-post_type menu-item-object-page narrow">Postani dio tima</li>
<li id="nav-menu-item-23036" class="menu-item menu-item-type-post_type menu-item-object-page narrow">Edukacije</li>
<li id="nav-menu-item-15306" class="menu-item menu-item-type-post_type menu-item-object-page narrow">Kontakt</li>
<li class=" astm-search-menu is-menu is-dropdown menu-item"><a href="#" aria-label="Search Icon Link"><svg width="20" height="20" class="search-icon" role="img" viewBox="2 9 20 5" focusable="false" aria-label="Search">
<path class="search-icon-path" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></a>
<form
class="is-search-form is-form-style is-form-style-3 is-form-id-0 " action="https://rich-nails.com/" method="get" role="search"><label for="is-search-input-0"><span class="is-screen-reader-text">Search for:</span><input type="search" id="is-search-input-0" name="s" value="" class="is-search-input" placeholder="Search here..." autocomplete="off"></label><button type="submit"
class="is-search-submit"><span class="is-screen-reader-text">Search Button</span><span class="is-search-icon"><svg focusable="false" aria-label="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span></button></form>
<div
class="search-close"></div>
</li>
</ul>
</div>
Also this is the website:
https://rich-nails.com
It is restricted to some countrys and I hope it is not for yours :)
Thanks in advance!
I have a problem with my bootstrap ul.dropdown-menu in my header-menu. I have a li-item with a dropdown, but the dropdown only shows then I hover the li-item.
How can I make it, so it only shows on click and stay until I click on the li-item again or anywhere else?
I had made many Google search's, but I can't find the answer. Thise exampels on Bootstrap's website, have the same classes as my header menu.
<ul id="menu-primary" class="nav navbar-nav ml-auto custom-ul"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5305" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-5305 nav-item show"><a title="Item 1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle nav-link" id="menu-item-dropdown-5305">Item 1</a>
<ul class="dropdown-menu show" aria-labelledby="menu-item-dropdown-5305" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5321" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5321 nav-item"><a title="Dropdown item 1" href="#" class="dropdown-item">Dropdown item 1</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5322" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5322 nav-item"><a title="Dropdown item 2" href="#" class="dropdown-item">Dropdown item 2</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5323" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5323 nav-item"><a title="Dropdown item 3" href="#" class="dropdown-item">Dropdown item 3</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5324" class="custom-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-5324 nav-item"><a title="Dropdown item 4" href="#" class="dropdown-item">Dropdown item 4</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5316" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5316 nav-item"><a title="Item 2" href="#" class="nav-link">Item 2</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5299" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5299 nav-item"><a title="Item 3" href="#" class="nav-link">Item 3</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-5302" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5302 nav-item"><a title="Item 4" href="#" class="nav-link">Item 4</a></li>
</ul>
If you click on the dropdown item, it shows a dropdown, but it disappear after removing the mouse. I want the dropdown to stay, until I click on the parent-li again or anywhere else on the website.
I have this menu in Wordpress (it's based on bootstrap)and I want it to stick to top when scrolled, but have some content on top of the menu:
Image:
Code:
<div class="menu-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-3">
<a class="navbar-brand" href="https://x">
<img src="logo" alt="Logo" class="img-responsive" title=" Logo">
</a>
</div>
<div class="col-lg-9">
<nav id="site-navigation" class="main-navigation text-right" role="navigation">
<div class="menu-menu-1-container"><ul id="primary-menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">Link</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">Link</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">Link</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">Link</li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11">Link</li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10">Link</li>
</ul></div> </nav><!-- #site-navigation -->
<nav id="mobile-navigation" class="text-center" role="navigation">
<div id="mobile-menu-trigger">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-menu-1-container"><ul id="mobile-menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11">Link</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10">Link</li>
</ul></div> </nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
Since you are using the bootstrap, you can add its class "navbar-fixed-top" to the menu. The example of usage you can see here
If you just need to display the already attached menu correctly on top of the rest of the content - just use CSS z-index:
.menu-wrapper {
z-index:99999;
}
UPD: use this pattern to add classes on scrolling
I want to make a wrap it's content to the right so it fits the browser height.
As you can see in the screenshot the list doesn't fit onto the screen.
Example:
#dropdown-menu-id
{
display: block !important;
top: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul role="menu" class=" dropdown-menu" id="dropdown-menu-id">
<li id="menu-item-816" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-816">Egg</li>
<li id="menu-item-817" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-817">Alberschwende</li>
<li id="menu-item-818" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-818">Andelsbuch</li>
<li id="menu-item-819" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-819">Au</li>
<li id="menu-item-820" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-820">Bezau</li>
<li id="menu-item-854" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-854">Bizau</li>
<li id="menu-item-856" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-856">Buch</li>
<li id="menu-item-858" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-858">Damüls</li>
<li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-860">Doren</li>
<li id="menu-item-862" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-862">Hittisau</li>
<li id="menu-item-864" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-864">Krumbach</li>
<li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-866">Langenegg</li>
<li id="menu-item-868" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-868">Lingenau</li>
<li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-870">Mellau</li>
<li id="menu-item-872" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-872">Reuthe</li>
<li id="menu-item-874" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-874">Riefensberg</li>
<li id="menu-item-876" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-876">Schnepfau</li>
<li id="menu-item-878" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-878">Schoppernau</li>
<li id="menu-item-880" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-880">Schröcken</li>
<li id="menu-item-882" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-882">Schwarzenberg</li>
<li id="menu-item-884" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-884">Sibratsgfäll</li>
<li id="menu-item-886" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-886">Sulzberg</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">Warth</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">12</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">11</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">10</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">9</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">8</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">7</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">6</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">5</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">4</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">3</li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">2</li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888">1</li>
</ul>
As you can see the list doesnt fit into the browser.
You have two options...
Option 1: List is viewport height.
In this option, your list will be capped by the height of the screen and become scrollable.
ul{
background:#CCC;
display:block;
width:200px;
height:100vh;
overflow:auto;
}
The key code to pay attention to here is height:100vh or "Height is 100% of the Viewport's Height." and the overflow:auto; or "hide and make the overflowed text scrollable."
Option 2: List has max height.
In this option you will define a height, for example, 200px and set the overflow to auto.
ul{
background:#EEE;
display:block;
width:200px;
height:300px;
overflow:auto;
}
You can see both versions on my Fiddle here.
I am creating a nav (in wordpress) and am having issues when hovering over the menu to display the drop down menu.
http://jsfiddle.net/ggp9pywy/1/
The fiddle is a live example, when hovering over number1, 3 & 4, the divs move, I would like them to stay in the same place.
<div class="mainNavi">
<ul id="menu-main-navigation" class="nav navbar-nav navbar-right"><li id="menu- item-156" class="Number1Class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-156">Number1
<ul class="sub-menu">
<li id="menu-item-385" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-385">Number1
<ul class="sub-menu">
<li id="menu-item-384" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-384">Number 1</li>
</ul>
</li>
<li id="menu-item-386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-386">Number2
<ul class="sub-menu">
<li id="menu-item-387" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-387">Number 2</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-157">Number3
<ul class="sub-menu">
<li id="menu-item-388" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-388">Number3</li>
<li id="menu-item-389" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389">Number3</li>
</ul>
</li>
<li id="menu-item-158" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-158">Number4
<ul class="sub-menu">
<li id="menu-item-392" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-392">Number4</li>
<li id="menu-item-391" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-391">Number4</li>
<li id="menu-item-390" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-390">FAQ’s</li>
</ul>
</li>
<li id="menu-item-262" class="quoteHead menu-item menu-item-type-custom menu-item-object-custom menu-item-262">Get A Quote</li>
</ul> </div>
</div>
Thank you
Add this in your css:
.mainNavi li{
width:150px;
}
JsFiddle:
Fiddle