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 -->
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!
How to add element in navigation to look like this
For now i have this, i dont need the styling of lines etc, only focus on langauge selector to be on top of other. Here is what i have for now
<nav class="navbar" 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="#navbar-collapse-main">
<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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Home
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Home
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Home
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown">
Home
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</li>
<li>
<ul>
<li>History</li>
<li>Misson statement</li>
<li>Employment</li>
</ul>
</li>
<li>History</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
Working jfiddle
http://jsfiddle.net/y9RgH/
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 include an icon in a drop down menu. The icon is causing the menu to be rendered incorrectly (it appears the icon is being repeated on the menu bar and the menu).
snippet:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" 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>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-off">Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Any idea what is causing this?
You need to close your tag.
<i class="icon-off"></i>
This worked for me
<li> <i class="icon-off"> </i> Sign Out </li>