i wanna make "block color" on my navigationbar with bootstrap. like this :
i used nav-pills for that. but i got nothing. block color is not showing. This is my code :
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills">
<li>Home</li>
<li>Service</li>
<li>Gallery</li>
<li>Contact</li>
<li>About us</li>
</ul>
</div>
</nav>
Use the following CSS
.navbar.navbar-default {overflow: hidden; padding: 10px; background-color: #fff; border: 0;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills">
<li>Home</li>
<li>Service</li>
<li>Gallery</li>
<li>Contact</li>
<li>About us</li>
</ul>
</div>
</nav>
Use navbar-nav instead of nav-pills
Related
Hi I want to change the font color of the bootstrap navbar links and already tried setting a specific class to the navbar like those suggested in other posts similar to this. However, I only managed to change the font of the navbar brand. Can you give any suggestions? Is there a problem with my specificity?
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar .navbar-www{
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
I'm still an absolute beginner at coding and trying to avoid !important and still learning on specificity.
Thank you!
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar-www li a{
color: white !important;
<header>
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
</header>
Try to avoid !important as it is a bad habit. You can override the bootstrap CSS by adding some extra classes to your navbar or may be any ID.
Here is what you can do to change the navlink text color
.navbar-www.navbar-brand li a{
color:#fff;
}
If this doesn't override, try to add some id in you navbar and make your css code something like this.
#navbar.navbar-www.navbar-brand li a{
color:#fff;
}
You can easily check in the console, what is the styling of the nav link bootstrap. You can override this by adding one extra selector, either it is class, attribute, id, or any parent selector.
You need to add color for link please replace .navbar .navbar-www this with .navbar .navbar-www a please check below
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar .navbar-www a{
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
Trying to fit an image to the navbar I'm using. I can not get it to work in CSS but I can get it to work in HTML. I do not want to style the logo in HTML, only in CSS.
The image is "RPGWizards.jp"
This is the html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="logo" href="#"><img src="Assets/RPGWizards.jpg"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Our Products</li>
</ul>
</div>
</nav>
This is the CSS
#logo{
width= 42px ;
height= 42px;
}
/NTqjn.jpg
You have used is an incorrect syntax for width: 48px; there is colon in between not = symbol.
The class nav-brand has a padding and you need to make it to 0 and fit it to the block.
View in full screen for visualization.
a#logo.navbar-brand {
padding: 0;
}
#logo img {
width: 48px;
height: 51px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="logo" href="#"><img src="http://placekitten.com/301/301"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Our Products</li>
</ul>
</div>
</nav>
i followed the bootstrap way to build a navbar and a footer, but i am having some troubles with the navbar, i want to place an image that is my logo inside the navbar at the begining in the left, but the logo does not fit the column. I don't know why.
here is my code:
<header>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-left">
<img src="img/logo1.png" class="img img-responsive" alt="">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
Image:
i tried to add this css:
.navbar-brand
{
margin: 0;
padding: 0;
}
.navbar-brand img
{
max-height: 100%;
}
but then my image get to small, if i want to increase the size of the image the image stretch, i just want the image to maintain the size ratio, and fit the left side of the navbar, what is wrong here?
bootply
Put navbar-brand outside of navbar-nav
<header>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo1.png" class="img img-responsive" alt="">
</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</header>
More Info
You can try this..
.navbar-brand
{
padding-left:20px;
z-index:999;
position:relative;
}
I'm trying to make it where all links within the navbar are centered and if I had more links they will automatically be centered as well.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
Do you want you navbar to look like this??
<div class="container">
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</nav>
</header>
</div>
May this helps you in understanding more.. http://www.bootply.com/CSI2KcCoEM
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">Left 1</li>
<li class="navbar-left">Left 2</li>
<li class="active">Center 1</li>
<li>Center 2</li>
<li>Center 3</li>
<li class="navbar-right">Right 2</li>
<li class="navbar-right">Right 1</li>
</ul>
</div>
</nav>
You can center your element setting giving ul the property of display:inline-block; and margin:0 auto; and then text-align:center; to its parent element
.navbar-nav{
float:none !important;
margin:0 auto;
display:inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid" style="text-align:center"> <!--- added text-align center --->
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
DEMO
You can use : Class="Center-block"
<div class="container-fluid" class="Center-block">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
Try this:
Make ul text-align:center; & add display: inline-block; to li a
I created a navbar with Twitter-Bootstrap but I'm having trouble with my navigation.
I want to create navigation where nav is on the left and my logo on the right. I created the .nav-head-middle div with vertical-align:middle; and display:inline-block; so that my navigation and logo are on the same line (i.e. the middle).
My navigation and logo are on the same line but my problem is that my logo isn't on the right.
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="nav-head-middle">
<ul class="nav navbar-nav nav-adelva">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
</div>
<div class="nav-head-middle">
<div class="navbar-right">
<img src="image/logo.png" />
</div>
</div>
</div> <!--/container -->
</div> <!--/navbar -->
CSS
.nav-head-middle{
display:inline-block;
vertical-align:middle;
}
Your problem could reside in not specifying the first set of navigation tabs to float left.
In CSS you need to tell the parts on the left to "go left" and the parts on the right to "go right".
In your case, with using bootstrap, you should utilize the built in code as apposed to creating extra custom CSS. The build in classes that should help are "navbar-left" and "navbar-right".
Not sure if this HTML will work for you or if it will help clarify your troubles, but I would think the html code should look closer to this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-navtabs navbar-left">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
<ul class="nav nav-tabs navbar-right">
<li><img src="image/logo.png" /></li>
</ul>
</div> <!--/container -->
</div> <!--/navbar -->