I am working on two column bootstrap based WordPress theme where i want to implement multilevel Vertical menu.. After trying for hours somehow i have achieved success in creating responsive multilevel vertical menu in HTML/CSS for which i have shared the code below. I want to implement it in WordPress nav-menu. The issue that i am facing is the sub-menu overlaps the parent menu links in bottom instead of working just like the html code that i have created and added. I know i need to work with navwalker which i tried but was unable to get success. Can you please tell me how can i achieve the same menu functionality as per the given code in WordPress nav-menu.
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="site-logo hidden-xs"><h2>Company Logo</h2></div>
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Company Logo</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu Item 1</li>
<li>Menu Item 2</li>
<li>Dropdown <span class="pull-right"><b class="caret"></b></span>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>Action</li>
<li>Sub-Dropdown <span class="pull-right"><b class="caret"></b></span>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2">
<li>Submenu 1</li>
<li>Submenu 2</li></ul>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Menu Item 4</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </p>
</div>
</div>
</div>
JSFIDDEL
You can achieve the desired menu by removing floats from the Bootstrap navbar, and setting position: static on the dropdown menu, plus a few other styling tweaks.
Then you have to do a little JavaScript to get the nested dropdown menus to work.
Here is a JSFiddle.
JavaScript courtesy of W3Schools snippet.
Related
Kindly check the following HTML code for displaying my menu section.
<div class="csidemenu collapse" id="collapseExample">
<ul>
<li>HOME</li>
<li><a data-toggle="collapse" href="#submenuwork" role="button" aria-expanded="false" aria-controls="submenuwork">WORK</a>
<ul class="collapse" id="submenuwork">
<li>All</li>
<li>Residential</li>
<li>F & B</li>
<li>Leisure</li>
<li>Retail</li>
<li>Workspaces</li>
</ul>
</li>
<li>STUDIO</li>
<li>AWARDS</li>
<li>PRESS</li>
<li>CONTACT</li>
</ul>
</div>
How can I make this dynamic by using nav menu function?
I have a bootstrap navbar fixed top that is using the navbar toggle icon bar. When I resize the browser the icon bar is pushed below the logo which makes the nav bar taller, I need it to force the logo to resize because it's using the img-responsive class and keep the navbar 50px tall. I tried setting the wrapper Div to overflow:auto which someone on here suggested in another question but that didnt work.
HTML
<div style="overflow:auto;">
<nav class="navbar navbar-default navbar-fixed-top navbar-header-full">
<div class="header-full-title img-responsive">
<img src="/Content/img/MTC_logo_header.png" class="img-responsive" />
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class=" nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT</li>
<li>DIRECTORY</li>
<li>CONDOS</li>
<li>APARTMENTS</li>
<li class="dropdown">
EVENTS
<ul class="dropdown-menu dropDownMTC pull-right">
<li>YOGA ROCKS THE PARK</li>
<li role="separator" class="divider"></li>
<li>MONDAY NIGHT MOVIES</li>
<li role="separator" class="divider"></li>
<li>HORSES OF HONOR</li>
<li role="separator" class="divider"></li>
<li>THURSDAY IN THE PARK</li>
<li role="separator" class="divider"></li>
<li>EVENT SHUTTLE</li>
<li role="separator" class="divider"></li>
<li>HOLIDAY LIGHTS FESTIVAL</li>
</ul>
</li>
<li>NEWS</li>
</ul>
</div>
</nav>
</div>
Now, if you are talking in terms of the wrapping. Remember that there are often scenarios where things may not look the way you want them to at certain sizes, but the goal is to focus on common screen dimensions as there is a good chance nobody may ever see the issue. You can use Chrome's built-in emulator to test different device dimensions, or a number of web-based utilities.
Secondy, if the header image is intended to be a logo or brand-image, you can always leverage Bootstrap's built-in class
.navbar-brand
Which, in your case would look something like this.
<a href="#" class="navbar-brand">
<div class="header-full-title">
<img src="http://via.placeholder.com/100x50" />
</div>
</a>
I am using the Bootstrap 3.0 framework and Modern Business theme (http://startbootstrap.com/modern-business). When using the default Modern Business nav settings, the main menu dropdowns work brilliantly as they should on mobile devices. However, when I change the menu to be "nav-justified" in the HTML code (using Bootstrap's "nav-justified" CSS class), the menu does not work as expected.
When you tap any menu item with dropdowns, it shows a navigation dropdown on the far left side, which runs outside of the parent CSS frame:
I am also using the Sticky Nav solution found here: How to use the new affix plugin in twitter's bootstrap 2.1.0?
Here is my HTML code for the menu:
<nav class="navbar navbar-inverse" role="navigation">
<div id="nav-wrapper">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<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>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav nav-justified">
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>1 Column Portfolio</li>
<li>2 Column Portfolio</li>
<li>3 Column Portfolio</li>
<li>4 Column Portfolio</li>
<li>Single Portfolio Item</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog Home 1</li>
<li>Blog Home 2</li>
<li>Blog Post</li>
</ul>
</li>
<li class="dropdown">
Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Width Page</li>
<li>Sidebar Page</li>
<li>FAQ</li>
<li>404</li>
<li>Pricing Table</li>
</ul>
</li>
</ul>
</div> <!-- collapse -->
</div> <!-- span12 -->
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
</div> <!-- nav-wrapper -->
</nav>
And here is the script I have at the bottom of my HTML:
<script>
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
</script>
Here, also, is the obligatory JSFiddle to examine (JS and CSS code linked in the JSFiddle panel on the left): http://jsfiddle.net/L94Mj/
I'm sure I'm somehow dancing around the answer, but this thing has had me stumped for two days now, and I need a fresh brain to look at things. I'm happy to provide whatever extra code is needed to help find the answer.
I know this issue was covered in another post but his fix didn't work for me since I have a drop down sub-menu. Is there away just to make the menu collapse when switching between the two so the scroll bars don't appear?
Submenu css used
[http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3][1]
Fixed Tired
This is a known issue in 3.0.2
(https://github.com/twbs/bootstrap/issues/11243)
A workaround:
.navbar-collapse.in {
overflow-y: visible; } Demo: http://bootply.com/96924
Skelly
Restoring expanded responsive navbar menu creates scrollbar in Bootstrap 3.0.2
My CSS Menu
<nav class="navbar navbar-fixed-top navbar-inverse" 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" href="index.php">Chesapeake Controls Inc.</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div style="display: inline-block;" class="pull-right">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Capabilities<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu">Building Automation Systems
<ul class="dropdown-menu">
<li>Products </li>
<li>Services </li>
</ul>
</li>
<li class="dropdown-submenu">HVAC Service
<ul class="dropdown-menu">
<li>Maintenance </li>
<li>Installation </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Projects<b class="caret"></b>
<ul class="dropdown-menu">
<li>Building Automation</li>
<li>HVAC</li>
</ul>
</li>
<li>Careers</li>
<li>Contact Us</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Customer Portal</li>
<li>PPS Maintenance</li>
<li class="divider"></li>
<li>File Server</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</div>
</nav>
I am trying to create a custom navbar in Bootstrap.
I'd like to implement four things:
Right align of the nav links
Text center-align of the nav links when navbar expanded
Text right-align of the nav links when navbar collapsed
(this is the hard part) Additional nav links that are shown when the navbar is collapsed but not shown when expanded.
<div class="navbar">
<div class="navbar-inner">
<div class="ps-content">
<button type="button" class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">Navigation</div>
<!-- PS RHS menu items -->
<div class="visible-tablet pull-right">
<ul class="nav">
<li class="active">Active link</li>
<li class="divider-vertical"></li>
<li>Second link</li>
<li class="divider-vertical"></li>
<li>Third link</li>
</ul>
</div>
<div class="nav-collapse pull-right ">
<ul class="nav pull-right ">
<li class="active">Actives link</li>
<li class="divider-vertical"></li>
<li>Second link</li>
<li class="divider-vertical"></li>
<li>Third link</li>
</ul>
</div>
</div>
</div>
</div>
jsFiddle here: http://jsfiddle.net/robmc/M43fK/4/
I've successfully achieved 1 and 2, and am sure there's some simple CSS markup I am missing for 3, but it's point 4 that I am stumped on. I haven't seen this tried anywhere else. Any ideas?
Thanks
For question 3, you could use <li class="text-right">.
And for question 4 (a link that only displays when the navbar is collapsed) there are several different approaches. One way is to use the hidden-desktop hidden-tablet classes (since you're already using visible-*)
<ul class="nav hidden-desktop hidden-tablet">
<li>Collapsed link</li>
</ul>
Bootply Demo
Edit - Bootstrap 3 updated the three class names, depending on the size you wish to hide: .hidden-sm, .hidden-md, .hidden-lg
Edit(2) - Bootstrap 4 .hidden-* classes have changed to display classes