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.
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 am using a bootstrap Nav for this page
http://careers.baffinland.com
I added the fixed-top class as I need a sticky top, but that then overrides navbar-right class and aligns the menu to the left. It also covers up my logo which was aligned left.
In addition i would like to hamburger responsive menu to open to the left, when you open in responsive mode, the drop down is stuck to the right of the button (this wont be clear until menu is aligned right again) which forces the toggle to jump to the middle of the page
<!-- <div class="site-nav col-6 col-sm-6 col-md-9">-->
<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top " role="navigation" style="max-width: 1360px; margin: 0 auto;">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236" alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;" /></a>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul id="menu-main-menu" class="nav navbar-nav navbar-right"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-16 nav-item"><a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-16">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-16" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17 nav-item"><a title="Who We Are" href="https://www.baffinland.com/about-us/who-we-are/" class="dropdown-item">Who We Are</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-20 nav-item"><a title="Operation" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-20">Operation</a></li>
</ul></div>
</nav>
<!-- </div> -->
Your logo is outside of your navbar and your "navbar-brand" is on "display-none".
<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top" role="navigation" style="max-width: 1360px; margin: 0 auto;">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236" alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;">
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul id="menu-main-menu" class="nav navbar-nav navbar-right">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-16 nav-item">
<a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-16">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-16" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17 nav-item">
<a title="Who We Are" href="https://www.baffinland.com/about-us/who-we-are/" class="dropdown-item">Who We Are</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18 nav-item">
<a title="Our Leadership" href="https://www.baffinland.com/about-us/our-leadership/" class="dropdown-item">Our Leadership</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item">
<a title="FAQ" href="http://www.baffinland.com/about-us/faq/" class="dropdown-item">FAQ</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-20 nav-item">
<a title="Operation" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-20">Operation</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-20" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21 nav-item">
<a title="Mary River Mine" href="http://www.baffinland.com/operation/mary-river-mine/" class="dropdown-item">Mary River Mine</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22 nav-item">
<a title="Shipping & Monitoring" href="http://www.baffinland.com/operation/shipping-and-monitoring/" class="dropdown-item">Shipping & Monitoring</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-23 nav-item">
<a title="Sustainability" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-23">Sustainability</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-23" role="menu">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24 nav-item">
<a title="Overview" href="http://www.baffinland.com/sustainability/overview/" class="dropdown-item">Overview</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25 nav-item">
<a title="Health & Safety" href="http://www.baffinland.com/sustainability/health-and-safety/" class="dropdown-item">Health & Safety</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26 nav-item">
<a title="Environment" href="http://www.baffinland.com/sustainability/environment/" class="dropdown-item">Environment</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27 nav-item">
<a title="Communities" href="http://www.baffinland.com/sustainability/communities/" class="dropdown-item">Communities</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28 nav-item">
<a title="Learning & Development" href="http://www.baffinland.com/sustainability/learning-and-development/" class="dropdown-item">Learning & Development</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-11 current_page_item active menu-item-29 nav-item">
<a title="Careers" href="http://careers.baffinland.com/" class="nav-link">Careers</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-30 nav-item">
<a title="Media Centre" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-30">Media Centre</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-30" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31 nav-item">
<a title="News Releases" href="http://www.baffinland.com/media-centre/news-releases/" class="dropdown-item">News Releases</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32 nav-item">
<a title="Media Gallery" href="http://www.baffinland.com/media-centre/media-gallery/" class="dropdown-item">Media Gallery</a>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33 nav-item">
<a title="Document Portal" href="http://www.baffinland.com/media-centre/document-portal/" class="dropdown-item">Document Portal</a>
</li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-34 nav-item">
<a title="Contact Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-34">Contact Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-34" role="menu" style="display: none;">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35 nav-item">
<a title="Contact Information" href="http://www.baffinland.com/contact-us/contact-information/" class="dropdown-item">Contact Information</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I put your logo into the "nav" tag, maybe this helps you more to figure out. I recommend to copy one of these templates, so your html structure will work. https://getbootstrap.com/docs/4.4/components/navbar/
Well, navbar-right worked before I added the fixed-top class, you can disable fixed-top and try for yourself...
regardless, I did try your solution and it didn't work. I do appreciate the help though..
What I did do was this, I just added right margins to navbar-brand and pushed it over to where I wanted it
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>
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 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