Is it possible to make Bootstrap change the navbar list from text to icons from the browser re-sizing instead of making it into a collapse drop down?
For example, make example 1 turn into example 2 just from the browser re-sizing.
Example 1:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Example 2:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-info-sign"></li>
<li><span class="glyphicon glyphicon-envelope"></li>
</ul>
Sure, add some css like this:
.nav .glyphicon {
display: none;
}
#media screen and (max-width: 300px){
.nav .text {
display: none;
}
.nav .glyphicon {
display: inline;
}
}
Then update your lis to have a span for both text and the icon:
<li>
<span class="text">Home</span><span class="glyphicon glyphicon-home"></span>
</li>
The #media styles specify that when the screen width is 300px or less, then hide the text and show the icon. The icon is hidden by default.
EDIT:
I've updated your fiddle to have the switch working. Here's what I did:
http://jsfiddle.net/cPa6b/
Removed the button in your navbar header
Removed the collapse styles on your navbar div
Added 2 new styles in the media query to counteract bootstrap's style (also changed the max-width to 768 to match bootstrap's default):
.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }
.navbar-nav { margin: 5px; }
You may also consider customizing the #grid-float-breakpoint variable in bootstrap as mentioned here http://getbootstrap.com/components/#navbar
Related
this is the website I'm developing now I have a problem with how to auto navbar expand on mouse hover on this site http://www.kasuncfernando.tk/dls/index.html can you guys inspect it and tell me what to do or what to add, thank you
how to set navbar auto-expand on mouse hover
Here is one item of the menu. Try this:
.dropdown-menu.multi-level {
display: none;
}
.nav.navbar-nav li:hover ul {
display: block
}
<ul class="nav navbar-nav">
<li>
Admission <b class="caret"></b>
<ul class="dropdown-menu multi-level">
<li>B.Tech</li>
<li>M.Tech</li>
<li>Ph.D</li>
</ul>
</li>
</ul>
This will work, check if it helps:
.navbar-nav > li:hover > .dropdown-menu {
display: block;
}
I have a navbar with logo on left and a navbar-right (float: right) on the far right which contains a dropdown as the first element and some other elements. The dropdown menu is large and responsive.
What I'd like to be able to do is prevent the dropdown from disappearing when I hover over the dropdown and move the cursor left in navbar (towards the logo). The dropdown should remain open as long as the cursor is still in the navbar. So this should not happen -
JS Fiddle - http://jsfiddle.net/gva90uks/10/embedded/result/
Code - http://jsfiddle.net/gva90uks/10/
I've tried adding left-padding to the dropdown-menu when the menu is open, but the padding has to be dynamic based on window size otherwise it pushes the logo. So I'm looking for better solutions rather than adding the padding.
I'm okay with both js and css based solutions.
I would use flexbox and flex-grow, like below.
This because flexbox allows elements to grow bigger (or shrink smaller) if there is space. So the drop-down link (the parent <li>-element) will at default styling be the width of the text on the link But when we hover over the link, the <li>-element will grow as much as possible, i.e. all the way to the brand, causing the drop-down not to hide when hovering over the top bar (which now contains the much bigger <li> (dropdown) element).
.navbar .container-fluid {
display: flex;
}
.navbar .container-fluid .navbar-collapse {
flex-grow:2;
}
.mega-menu {
position: absolute;
right: 0;
left: 0;
/*padding: 27px 0;*/
}
.navbar-right {
display: flex;
justify-content: flex-end;
width: 100%;
}
#menu-area {
display: flex;
}
#menu-area .dropdown-toggle {
margin-left: auto;
}
.dropdown-toggle:hover + .dropdown-menu, .dropdown-menu:hover {
display: block;
margin-top: 0;
}
.menu-large:hover {
flex-grow: 2;
}
.dropdown-toggle:hover {
flex-grow: 2;
}
.dropdown-toggle {
text-align: right;
}
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse" id="">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown menu-large">
Dropdown <span class="caret"></span>
<div class="dropdown-menu mega-menu">
<div class ="container">
<ul class="list-unstyled">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</li>
<li>Another Link</li>
</ul>
</div>
</div>
</nav>
I want to create button like menu using navbar. I want to do this because it's collapsible interface for small devices.
I write this HTML markup:
<div class="container">
<nav class="navbar" style="background-color: transparent;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" style="background-color: black;">
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
<span class="icon-bar" style="background-color: white;"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</div>
</div>
</nav>
</div>
and this styles:
nav ul {
width: 100%;
text-align:center;
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
margin: 10px;
}
but there is some problem:
this menu items isn't center in ul. How I can center all li in ul?
If I resize the window in some width this menu broke in 2 line. How I can fix this that my menu being 1 line for md an lg sizes?
Demo
Thanks
Using white-space: no-wrap will stop items wrapping within the ul
Bootstrap puts float: left on nav.li elements which we need to override
Change your css to this:
nav ul {
width: 100%;
text-align: center;
white-space:nowrap /* <-- changed */
}
nav ul li {
text-align: center;
width: 17%;
background-color: #dbd9d9;
/*padding: 10px;*/
margin: 10px;
display: inline-block !important; /* <-- changed */
float: none !important; /* <-- changed */
}
Have to use !important to override bootstrap
Updated bootply
With Changes in your HTML and removing width of li, I got this working as you wanted.
<ul class="row nav navbar-nav">
<li class="active col-xs-3 col-sm-2 col-ms-2 col-lg-2">Home</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 1</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 2</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 3</li>
<li class="col-xs-3 col-sm-2 col-ms-2 col-lg-2">Page 4</li>
</ul>
Here is a working Bootply
Dont worry about setting the width to the li manually, use the bootstrap inbuilt classes. Also the above HTML could be rewritten like below.
<li class="col-xs-3 col-sm-2">Page 1</li>
You dont have to specify col-ms-2 col-lg-2 because by default bootstrap framwework will carry forward styles to all the devices untill a specific rule for that device is given. Here the rule col-sm-2 will be carried out to md device and lg device. But its always good practice to be as detailed as possible.
I'm using a templating engine, so that I have to have a div(or some marker) inside of a Bootstrap 3 dropdown.
When I do this, the formatting goes out of whack:
jsfiddle
Here's my sample code:
<div class="row">
<div class="col-lg-2">
<h1> Dropdown Test</h1>
<button data-toggle="dropdown">Dropdown</button>
<ul class="dropdown-menu" role="menu">
<li><a>test</a>
</li>
<li><a>test2</a>
</li>
<div>
<li><a>test3</a>
</li>
</div>
</ul>
</div>
</div>
JSFIDDLE
Bootstrap dropdown menus are specific when setting the CSS:
.dropdown-menu > li > a {
clear: both;
color: #333;
display: block;
font-weight: normal;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
If you deviate from the ul-li-a order, you'll need to include additional CSS rules. This is why SASS/LESS are good; they make it easy to extend CSS rules to other elements/classes without too much extra markup; however, I won't demonstrate SASS or LESS at this time, just take a look at the CSS you could include in your page, below:
I'
/* notice the missing '>' before the 'a' */
.dropdown-menu > li a {
clear: both;
color: #333;
display: block;
font-weight: normal;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
/* change colors, remove underline and turn on pointer */
.dropdown-menu > li a:hover, .dropdown-menu > li a:focus {
background-color: #f5f5f5;
color: #262626;
cursor: pointer;
text-decoration: none;
}
Your HTML also wasn't valid and didn't adhere to the Bootstrap setup. To update your markup, you'd need to include a .container and .btn-group. Additionally, the div was at the same level as the li, which was not preferred/allowed. Finally, I've added a dropdown arrow for UX styling.
<div class="container">
<div class="row">
<div class="col-lg-2">
<h1>Dropdown Test</h1>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>test</a></li>
<li><a>test2</a></li>
<li>
<div><a>test3</a></div>
</li>
</ul>
</div>
</div>
</div>
</div>
There's a caveat, the above is an example and may not be advised to use in production. You are applying the CSS to all links nested in dropdown-menu li. If you have several levels of nesting, that style will apply to all those links; for that reason, consider modifying the CSS selector, perhaps use a class on your anchor links.
So I'm going to expand on my comment as well as what belinus was saying. I still don't think this is the best way to do it, but may be a temporary solution at least. I would put it in a ul (instead of the div) as belinus was saying, however I don't think a ul can be a child of another ul without being stuck inside of another li (see this post about that), so here's what I think it would look like:
<ul class="dropdown-menu" role="menu">
<li><a>test</a></li>
<li><a>test2</a></li>
<li>
<ul id="test">
<li><a>test3</a></li>
</ul>
</li>
</ul>
And then you could just add some css to that ul. In your fiddle I just added 20px and it looked lined up to me:
#test {
padding-left: 20px;
}
Hopefully this helps a little bit.
The proper way to do it looks like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
</ul>
</li>
</ul>
You cannot have a <div> directly inside <ul>. This makes the HTML invalid and it produces erratic results in different browsers. So, you need to edit the template to render it inside a particular <li> and add stuff inside it.
I have written a navigation bar based on the example given in the components link in Bootstrap. But the navigation bar does not collapse in a right way as it is supposed to do. As shown in the process below:
State 1
State 2
State 3
the navigation bar is not collapsed sharply, rather, it will become 2 columns first and then collapse.
I have found a same problem that has been asked previously in stackoverflow. It seems like the problem is caused by the default breaking point defined in bootstrap. However, I do not know where to change the breaking point and how can I do it.
I am using the latest bootstrap version, and following is the snippet of my navigation bar code.
Thanks in advance for any help and advice!
<!--navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a><!--end of logo-->
</div><!--end of logo & collapsing logic-->
<div class="collapse navbar-collapse" id="navItems">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul><!--end of menu list-->
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>
</form><!--end of search bar-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon glyphicon-wrench"></span> Settings</li>
<li><span class="glyphicon glyphicon-refresh"></span> Update Profile</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off"></span> Sign Out</li>
</ul><!--end of sub menu-->
</li><!--end of dropdown menu-->
</ul><!end of the user account menu-->
</div><!--end of collpased nav-->
</div><!--end of container-->
</nav><!--end of navbar-->
Update
I have looked into the solution provide by this link, which does not work in the newest version of Bootstrap.
And I have locate the code block which defines the breakpoint of the collapsing effect:
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
And I tried to modify the defined min-width, however I changed, it just does not work.
I finally figured it out:
To do this in the latest version:
I have modified three parts in the css file:
First you need to set when the navbar-header will float to left (in may case 1000px):
#media (min-width: 1000px) {
.navbar-header {
float: left;
}
}
Then you will need to decide when all the menu button will be disappeared:
#media (min-width: 1000px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
Last you need to define when the navbar-toggle will take effect:
#media (min-width: 1000px) {
.navbar-toggle {
display: none;
}
}
Then just wait to see the magic happen:
When the screen reached the 1000px threshold:
From
To
Seems like you should be able to override the default navbar collapse point like this.. (Assuming 1000 pixels in the new collapse point):
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Demo: http://bootply.com/UQaiG0oNTR
I suggest installing Bootstrap with SASS, in this way mixins are separeted and easier to manage.
With this configuiration the breaking-point is in your _variable mixins, and the _navbar mixin just picks up the variable by default.
Overriding will work but it's probably neater if you keep coherency with bootstrap mixins.
Read the documentation that you yourself linked to!
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.