http://www.bootply.com/jwGIUdSuHM
I am using Bootstrap, and I have two menus at the top. Once I make my window narrow, my "responsive view" looks like this when I click on My Account. Notice the overlapping options (not good). How can I fix that?
I've tried setting this to 700 instead of approximately 300 pixels:
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 700px; }
... and although the problem is gone, it doesn't quite do it for me, because it makes my menu stretch way to long on a phone. So how can I fix that ugly overlap while keeping my menu the same height?
CSS
body { margin-top: 125px; }
h1 {text-transform:uppercase;}
/* Header Nav*/
#faves, #cart {border:none;}
#nav {text-transform:uppercase;}
.multi-col-4 {width:820px;}
.multi-col-2 {width:400px;}
#media (max-width: 890px) {
body { margin-top: 65px; }
/* Nav*/
.multi-col {width:100%;}
}
HTML
<form>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<button id="faves" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Favorites</span> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button id="cart" type="button" class="navbar-toggle btn-link btn-lg"> <span class="sr-only">Shopping Cart</span> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> </button>
<a class="navbar-brand" href="#">Logo</a> </div>
<!-- end navbar-header -->
<div id="nav" class="navbar-collapse collapse">
<div id="navTop" class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs"> <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Cart (2) <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Something else here</li>
<li class="divider"></li>
<li>View Cart</li>
</ul>
</li>
<li class="dropdown hidden-xs"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Favorites (6) <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Something else here</li>
<li class="divider"></li>
<li>View All Favorites</li>
</ul>
</li>
<li> Option a </li>
<li class="dropdown"> My Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-4">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
<li>Option 9</li>
<li>Option 10</li>
<li>Option 11</li>
<li>Option 12</li>
<li>Option 13</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 14</li>
<li>Option 15</li>
<li>Option 16</li>
<li>Option 17</li>
<li>Option 18</li>
<li>Option 19</li>
<li>Option 20</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Option 21</li>
<li>Option 21</li>
<li>Option 22</li>
<li>Option 23</li>
<li>Option 24</li>
<li>Option 25</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="navBottom" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"> Option b <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-4">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Other Products</li>
<li>Action</li>
<li>Another action</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown"> Option c <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown"> Option d <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Another action</li>
<li>Another action</li>
</ul>
</li>
<li class="dropdown"> Option e <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-2">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Account</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Tools</li>
<li>Action</li>
<li>Another action</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown"> Option f <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="multi-col multi-col-2">
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Account</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<ul class="list-unstyled col-md-4" role="menu">
<li class="dropdown-header">Tools</li>
<li>Action</li>
<li>Another action</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown"> Option g <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
<li>Another action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Another action</li>
</ul>
</div>
</div>
<!-- end nav -->
</div>
<!-- end container-fluid -->
</nav>
</form>
I got it resolved with these two lines:
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: none; }
#nav {max-height:400px;}
Related
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>
I have this kind of dropdown in boostrap 3
<li class="dropdown"> <i class="fa fa-camera-retro fa-2x"></i> Dashboard
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
The problem is here that txt gone right to the icon, i want to text stay under the icon in the middle, and icon also in the middle at top of the text, when i add long text under the icon thta all stay in the middle
Here is working bootply
http://www.bootply.com/ZhwSteTLgw
What i need is this
But whne i add long txt all to stay in the middle?
UPDATE
Solution
<i class="fa fa-camera-retro fa-2x"></i><span class="show">Dashboard</span>
ul > li > a
{
text-align:center;
}
Try this:
DEMO
<li class="dropdown">
<a style="width:auto" href="#" class="dropdown-toggle col-md-12 text-center" data-toggle="dropdown">
<i class="fa fa-camera-retro fa-2x col-md-12 "></i> <p class="col-md-12 ">Dashboard</p></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown" style="display: table-caption;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="margin-left: 18PX;">
<i class="fa fa-camera-retro fa-2x"></i> Dashboard</a>
<ul class="dropdown-menu" style="">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
CHECK THIS
Here is a link to my markup, which is 100% relient on Bootstrap:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-align-justify menu-icon"></span>
</a>
<ul class="dropdown-menu">
<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>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" style="margin-right: 6px;">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user user-icon"></span>
<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>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
On codepen: http://codepen.io/dsparry/pen/qEJen
You'll see when you make the window small, the right icon jumps down below the left icon and makes the navbar larger.
I want the navbar and icon position to stay the same when the window is resized. In other words, I don't want anything to change. I've tried to override Bootstrap with custom CSS but haven't been able to figure it out.
Any ideas? What CSS should I include to prevent the icon from jumping down when the window is resized?
you have 2 ul
add classes to first ul : col-xs-6
add classes to second ul : col-xs-6 text-right pull-right
edit: that will break your layout.
You should have one UL with the intended right aligned li with pull-right at the first of the list like :
<ul class="navbar ...">
<li class="pull-right ...">
<li></li>
</ul>
You can get help better if you do a jsfiddle
I want to pull right icon glyph in drop down menu like as below
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right pull-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>Another action</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
But when I run this code on FireFox (Chrome and IE are oke), "icon-arrow-right" and "2-level Dropdown" aren't same a line . How can I fix it ?
Full code on JSFIDDLE
<a href="#" style="overflow: hidden;">
<span class="pull-left">2-level Dropdown</span>
<span class="icon-arrow-right pull-right"></span>
</a>
jsfiddle
The solution from cetver works well for me.
For the record though, here's another way to get the same results:
http://www.bootply.com/70536
HTML
<i class="icon-arrow-right"></i> 2-level Dropdown
CSS
.icon-arrow-right {
float: right;
margin-top: 2px;
margin-right: -6px;
}
I'm making a website using Twitter's Bootstrap and everything is almost set but I can't figure how to position a search bar into the main menu
Here is the website online
http://testings.coffeecup.com/index1.html
Each time I put it anywhere on the container it screws up either.
EDIT:
I managed to add it:
http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894
But I still can't position it on the right.
The css I'm using
.navbar-search {
position: relative;
}
.navbar-search .search-query {
float:right;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
background-image: url("");
}
Right after the <div class="navbar-inner"> include the search bar <input> with whichever attributes you need .. after just float it to the right and adjust the margins so its centered vertically in the nav-bar.
You have to add the search-bar inside <div class="navbar-inner"> and after <div class="nav-collapse collapse">.
The code for the search bar:
<input id="search" class="span3" type="search" name="search" placeholder="Search">
You can use the pull-right class
i used it in the container
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<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>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
REsult :