i am creating a site which has a 4th level navigation but it seems like not appearing in mobile and tablet. Here is my code
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>
Products
<ul>
<li><a href="#" >Food Products</a>
<ul>
<li>
<a >Baking & Cooking Aids</a>
<ul>
<li><a href="breadingmix" >Breading Mix</a></li>
</ul>
</li>
<li><a>Beverages</a>
<ul>
<li>Concentrated-Cocoa</li>
<li><a href="concentratedpowder" >Concentrated Powder</a></li>
<li><a href="energy-drink" >Energy Drink</a></li>
<li><a href="carbonated-drink" >RTD - Carbonated Drink</a></li>
<li><a href="juices" >RTD - Juices</a></li>
<li><a href="milk-based" >RTD - Milk Based</a></li>
<li>RTD - Tea</li>
<li><a href="sports-drink" >Sports Drink</a></li>
<li><a href="water" >Water</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
Whenever I click on the Beverages menu the navigation is back to Food Products.
Can you help me with this one? Thank you!
Related
I am working with menus on my website.
In my website, here is my structure-
Articles -- Menu
Tech Articles -- Sub Menu
Blogger Tutorials -- Sub Sub Menu --(Problem Not Getting Visible)
Photo Tutorials -- Sub Sub Menu
But my problem is "Blogger Tutorial" menu not getting visible. I tried to troubleshoot the issue but not getting any solution. You can see the problem on my website: http://www.joblesspanda.com/
Image for show problem: https://imgur.com/a/KaVU5QU
<ul class='menu'> <!-- Customize Navigation Menu Here -->
<li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
<li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
<ul class='sub-menu'>
<li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
<li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
<li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
<!--<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>-->
</ul>
</li>
</ul>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
</li>
</ul>
</li>
<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
<li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
</ul>
</li>
<!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
<li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
<li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
<li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
</ul>
You have multiple ul in li. Remove second ul element. it will display. Check below screenshots.
Before:
After: (after removing ul)
After: (if you want Photo Tutorials text you need to add this in li)
<ul class='menu'> <!-- Customize Navigation Menu Here -->
<li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
<li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
<ul class='sub-menu'>
<li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
<li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
<li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
<!--<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>-->
</ul>
</li>
<li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
</li>
</ul>
</li>
<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
<li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
</ul>
</li>
<!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
<li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
<li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
<li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
</ul>
the problem is with extra ul just put your photo blog's li and blogger tutorial's li in single ul:
<ul class='menu'> <!-- Customize Navigation Menu Here -->
<li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
<li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
<ul class='sub-menu'>
<li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
<ul class='sub-menu'>
<li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
<li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
<li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
<!--<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>-->
</ul>
</li>
<li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
</li>
</ul>
</li>
<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
<li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
</ul>
</li>
<!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
<li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
<li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
<li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
</ul>
I have started designing a website using HTML CSS Bootstrap and while making navigation menu dropdown menu is not coming on bringing mouse over instead its showing under it
I am hereby attaching the required code
<ul class="main-menu sf-menu">
<li class="active">Home</li>
<li>Know Your AO/Region/Branch
</li>
<li>HR Section
</li>
<li>General Banking
<ul>
<li> RajBhasha </li>
<li> Security </li>
<li> Miscellaneous </li>
</ul>
</li>
</li>
<li> Advances </li>
<li>IT Section
</li>
<li>Regions
<ul>
<li>Region 1:Nainital </li>
<li>Region 2: Almora </li>
<li>Region 3: Pithoragarh and Champawat </li>
<li>Region 4: Bageshwar and Chamoli </li>
<li>Region 5: Udham Singh Nagar </li>
</ul>
</li>
<li>News
</li>
</li>
<li>Staff Corner</li>
</ul> <!-- /.main-menu -->
</nav>
The result is like thisenter image description here
Please Help....
First add class "dropdwon" in li which you want to make dropdown. Second add class "dropdown-menu" on ul
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav mainNavigation">
<li class="active">Home </li>
<li> About Us </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li class="dropdown"> Molex Portfolio
<ul class="dropdown-menu">
<li> Fibre Products </li>
<li> Copper Products </li>
</ul>
</li>
<li>Contact Us </li>
<li> Employment Opp </li>
</ul>
</nav>
</div>
and add this css
.dropdown:hover .dropdown-menu{ display:block; }
I have created a navigation menu at my Home Page's header. I've set up the links in the navigation, but I want the links to be opened in a new tab. How can I achieve that?
<div class="sticky-nav">
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>About Us</li>
<li>Contact us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Manicures and Pedicures</li>
<li>Hair</li>
<li>Make Up</li>
<li>Hair Removal</li>
<li>Skincare</li>
<li>Hamam Maghrabi</li>
</ul>
</li>
</ul>
</nav>
</div>
More about a-target attribute at: W3Schools
Use: <a href="#" target="_blank".
<div class="sticky-nav">
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>About Us</li>
<li>Contact us</li>
<li class="dropdown"><a class="dropdown-toggle" target="_blank" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Manicures and Pedicures</li>
<li>Hair</li>
<li>Make Up</li>
<li>Hair Removal</li>
<li>Skincare</li>
<li>Hamam Maghrabi</li>
</ul>
</li>
</ul>
</nav>
</div>
Use target="_blank" in all your anchor tag
DEMO
I have created a slideshow but for some reason when I am clicking on the image to go to a next slide (as it should do) it takes it to another URL on a website I am creating.
I cant seem to find how I have managed to create a link to the page when clicking on it?
Here is the link to the page.
http://lichfieldrooms.uk/gallery.html
you <a> for all in navigation is broken you have not closed them so i think thats was causing the issue
<ul>
<li><a href="index.html">Home</li>
<li><a href="about.html">About</li>
<li>
Rooms
<ul>
<li><a href="single.html">Single Bedroom</li>
<li><a href="double.html">Double Bedroom</li>
</ul>
</li>
<li><a href="gallery.html">Gallery</li>
<li><a href="calendar.html">Check Availability</li>
<li><a href="reservations.html">Terms</li
><li><a href="contact.html">Contact</li>
</ul>
it should be
<ul>
<li>Home
</li>
<li>About
</li>
<li>Rooms
<ul>
<li>Single Bedroom
</li>
<li>Double Bedroom
</li>
</ul>
</li>
<li>Gallery
</li>
<li>Check Availability
</li>
<li>Terms
</li>
<li>Contact
</li>
</ul>
<ul id="menu">
<li>About Assetline
<li>Products & Services
<div id="mega">
<ul>
<li>Commercial Credit</li>
</ul>
<ul>
<li>Portfolio Management</li>
</ul>
</div><!--mega-->
</li>
<li>News & Events
</ul>
This is the menu structure what I want to integrate into WordPress . But there's an issue to add a div id ( ) inside of a menu . Any idea to achieve this ?
You forgot to close some of your first li tags. If that does work, remove the div, and assign the id in the child ul.
<ul>
<li>
<a>level 1</a>
<ul id="mega">
<li>
<a>level 2 A</a>
</li>
<li>
<a>level 2 B</a>
<ul>
<li>
<a>level 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>