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?
Related
My header is separate from my "front-page" and it is pulled to each page using the get_header(); function. This means that the header will be the same on all pages, however, I want to change the font color the something different on the front-page. How can I achieve this result within WordPress?
<head>
<?php wp_head(); ?>
</head>
<section class="navbar custom-navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
Website <span></span>
WBS <span></span>
</div>
<!-- MENU LINKS -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-nav-first">
<li>Product</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Benefits <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
<li>Cat 4</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Collection <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 6<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 4
</li>
<li>Dropdown 5</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dropdown 6</li>
<li>Dropdown 7</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
Convert your menu to a WordPress menu by entering it in admin area under Appearance > Menus.
Then display the menu in your template using the wp_nav_menu() function: https://developer.wordpress.org/reference/functions/wp_nav_menu/
WordPress will output your menu with classes that allow you to style the links based on which page you are on, which is active etc.
I am not so expert in CSS and Bootstrap so I can not build 2 submenus.
Do you have a simple solution for me?
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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">SAI</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Titolo <b class="caret"></b>
<ul class="dropdown-menu">
<li>Sottotitolo 1</li>
<li>Sottotitolo 2</li>
<li class="dropdown">Sottotitolo 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Nuovo sottotitolo 1</li>
<li>Nuovo sottotitolo 2</li>
<li>Nuovo sottotitolo 3</li>
<li>Nuovo sottotitolo 4</li>
<li>Nuovo sottotitolo 5</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I have found some solutions on this site but they are too complex for me because I also have a few problems with the English language.
Thanks
Giampiero
I have made a small example for you that implements a Bootstrap dropdown with a small custom addition to support a sub-menu that opens on hover:
HTML
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="sub-menu">Sub-menu <span class="glyphicon glyphicon-play"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
CSS (compiled from LESS)
li.sub-menu {
position: relative;
}
li.sub-menu span.glyphicon {
font-size: 0.7em;
}
li.sub-menu:hover .dropdown-menu {
display: block;
top: 0;
left: 100%;
}
You can see this working example here: http://codepen.io/anon/pen/amvavW
You should read the documentation on how to create dropdown-menus with Bootstrap:http://getbootstrap.com/components/#dropdowns
They have practical explanations that comes bundled with some code and working examples.
As much as I remember(correct me if I am wrong): Bootstrap currently does not natively support N-levels dropdown menus, so what you do is kind of use their built-in dropdown implementation and add a bit of custom CSS to get more sub-menu levels working in the way that you desire.
Hope it helps a bit!
Would it be possible using css bootstrap to recreate this style of menu I am using bootstrap and so far I have the top bar just with the two tabs and drop downs. I also see to show a drop down as in the administrator link you see and also a settings cog.
The blue icons buttons shoud be drop downs till the last item. I have posted my initial code on pastbin as the editor here was turning them into elements. Can someone advise me on how to stop that from hapening.
Code
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Cassed Dimensions Portal</li>
<li>Configruation Items</li>
<li class="dropdown">
Products<b class="caret"></b>
<ul class="dropdown-menu">
<li>Latest Products</li>
<li>Popular Products</li>
</ul>
</li>
<li class="dropdown">
Membership<b class="caret"></b>
<ul class="dropdown-menu">
<li>Personal Membership</li>
<li>Premium Membership</li>
</ul>
</li>
<li>Offers</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
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>