I am working a little exercise on codepen and trying to style the tabs of navbar using boostrap, but when I was using the original code on the site or adding
class="list-inline"
It ended up with the items on each line like this.
Can anyone explain why that happened? I am using boostrap 4 and here is my code:
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
you would have to use list-inline-item class to the li item as well.
see the fiddle below
https://jsfiddle.net/pr6t58wL/
<nav class="navbar navbar-default">
<div class="navbar-header">
Brand
</div>
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Menu 1</li>
<li class="list-inline-item">Menu 2</li>
<li class="list-inline-item">Menu 3</li>
</ul>
</nav>
Please use this code I think it is work on your requirement.
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="youridname1">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="youridname1">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
</div>
</div>
Related
I am trying to remove the whitespace below this Bootstrap 3 navbar. I have tried setting margin-bottom to zero for the nav, and I have tried to do vertical-align: middle to both divs.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Home
</div>
Setting a margin-bottom is the right way to go about it, you just need to increase the specificity of your css selector if your css is declared before your bootstrap link. One way to increase your selector specificity is by using nav.navbar as your selector.
See working example below:
nav.navbar {
margin-bottom: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Home
</div>
I got this problem that when I hover on my dropdown menu, the background changes and the color does also. But i can't get it to white..
What to do?
http://hcl.konggulerodhosting.dk/index.html
<nav>
<div id="topBar" data-toggler="is-active" class=" top-bar row ">
<button type="button" data-toggle="topBar" class="mobile__close hide-for-large"> </button>
<div class="small-12 columns">
<div class="top-bar-left">
<div class="site-logo"><img src="assets/images/logo.svg" alt=""></div>
</div>
<div class="top-bar-right">
<p class="mobile__headline hide-for-large">Menu</p>
<ul data-responsive-menu="drilldown large-dropdown" data-back-button="<li class="js-drilldown-back drilldown-back"><a>Back</a></li>" class="menu">
<li class="active">Forside</li>
<li>Undersøgelser
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
<li>Tilskud</li>
<li>Høreapparat</li>
<li>Information</li>
<li>Om os</li>
<li class="search__toggler">
<button type="button" data-toggle="search" id="search-toggler"></button>
</li>
</ul>
</div>
</div>
</div>
</nav>
.is-dropdown-submenu-item {
color:white;
}
is not working. So i dont know what to do..
Please don't link your site as it's bad for archiving purposes.
You need to change the link colour.
.is-dropdown-submenu-item a:hover {
color:#fff;
}
Check this image.............................................
I have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.
See Fiddle
For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.
try adding pull-right to those two <li class="dropdown"> classes
For this you have to play with pull-left pull-right classes of bootstrap.
See my fiddle
Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)
I am using this navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
I am I'm trying to place the "Home" icon next to the word "Home" and place it in the same grey block, I am doing this:
<li class="active">Home<i class='glyphicon glyphicon-home'></i></li>
I have tried to place it in several places without success.
Thank you in advance.
Why not inside the anchor tag ?
<li class="active">
Home<i class='glyphicon glyphicon-home'></i>
</li>
Demo: http://jsfiddle.net/dhirajbodicherla/urnb1wha/
If you want the Home icon towards the extreme right use pull-right class to the glyphicon like this
<li class="active">
Home<i class='pull-right glyphicon glyphicon-home'></i>
</li>
Demo : http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/
I'm using the newest version of Bootstrap, but not sure where to start fixing an issue with the navbar. The navbar looks right up until I decrease the width of the browser. The rest of bootstrap's components look fine with a resize, but the list items of the navbar get moved into a weird order. I looked into collapsing, but I think this may be an issue just of padding/width. I haven't made any edits to Bootstrap css. Any places to start?
<div class="container-fluid">
<div class="container-fluid" id="header">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<a class="navbar-brand" href="#">
<img alt="Logo" src="./html/Images/logo.png" height="20" />
</a>
<a class="navbar-brand" href="./index.html">My Navbar</a>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
Here's the fiddle: https://jsfiddle.net/y6k4jvv5/3/
add li tags around the two a tags and add css for the li to float left
<div class="container-fluid">
<div class="container-fluid" id="header">
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#">
<img alt="Logo" src="./html/Images/logo.png" height="20" />
</a></li>
<li>My Navbar</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div><!-- /.container-fluid -->
</div>
</div>
li {
float: left;
}
https://jsfiddle.net/y6k4jvv5/4/