I can't figure out how to add another drop down to my navbar. I already have one but I need to add another one on top of it.
html:
Toggle navigation
What We Do
CUSTOM SIGNS
CUSTOM SIGNS
DIGITAL PRINTING
SERVICES
DIGITAL PRINTING
SERVICES
</li>
</ul>
</li>
<li role="presentation">
get an estimate</li>
<li class="dropdown"><a data-toggle="dropdown" aria-expanded="false" href="#" class="dropdown-toggle">industry showcase<span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
<li role="presentation">Price Package</li>
<li role="presentation">Order Services</li>
<li role="presentation">Custom Request</li>
</ul>
</li>
<li role="presentation">gallery</li>
<li role="presentation">about us </li>
<!--<li role="presentation" id="getanestimate">request service</li>
<li role="presentation" id="getanestimate">contact </li>-->
<a class="navbar-text navbar-right actions"> <a class="btn btn-default action-button" role="button" href="signup.html">request service</a></a>
<a class="navbar-text navbar-right actions"> <a class="btn btn-default action-button" role="button" href="signup.html"> contact</a></a>
<i class = "fa fa-youtube"></i>
<i class = "fa fa-facebook"></i>
<i class = "fa fa-twitter"></i>
</ul>
<!--<p class="navbar-text navbar-right actions"> <a class="btn btn-default action-button" role="button" href="signup.html">contact</a></p>
<p class="navbar-text navbar-right actions"> <a class="btn btn-default action-button" role="button" href="signup.html"> request service</a></p>-->
</div>
</div>
Check this link i found somewhere in stack it may help you
click here
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
Project name
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
More options
<ul class="dropdown-menu">
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
</ul>
</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>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li class="dropdown-submenu">
More options
<ul class="dropdown-menu">
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
<li>Second level link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
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 use this code to logout from dropdownmenu but didn't work
<li>Log off</li>
Here is my Form
<form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
#UserManager.GetUserName(User)! <span class="caret"></span>
<ul class="dropdown-menu">
<li>Gigs I'm Going</li>
<li>Artist I'm Following</li>
<li role="separator" class="divider"></li>
<li>
Log out
</li>
</ul>
</li>
</ul>
</form>
I have created a multi-col submenu in Bootstrap, the submenu is left align with the top level menu, but I need to make it right align with the top menu.
I have tried to use absolute positioning, but no luck.
Please see the code at http://www.bootply.com/P3fltOTDRF
<nav class="navbar navbar-default" role="navigation">
<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="#">Brand</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Item <b class="caret"></b>
</li>
...
...
<li class="dropdown">
Two Column <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here that's extra long so we can see how it looks</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
.dropdown-menu.columns-2 {
min-width: 400px;
}
Just give pull-right to the nav bar?
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
Preview
Fiddle: http://www.bootply.com/Eot2HWSUjT
What about add class pull-right to the ul with class dropdown-menu like this
<ul class="dropdown-menu multi-column columns-2 pull-right">
DEMO
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 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>