I am trying to create a navbar in bootstrap 3.x. But I have an issue (JsFiddle) when trying to divide the menus to the left and right as in the following example.
Home - About - Services - Contact Login - Register
But the result I get with my code is something like this:
Home - About - Login
Services - Contact Register
This is my code currently.
.site-top-nav{
padding:0.5em;
color: #fff;
font-size: 12px;
width: 100%;
text-transform: uppercase;
}
.site-top-nav li{
margin-left: 2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse" role="nagivation">
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav" style="float:right;">
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
I have tried other methods, but I can't get the effect I needed.
I did few changes to your existing fiddle.
Just you need to add one more css property
check it here : https://jsfiddle.net/ns82ne1z/5/
.navbar-nav li{
margin-left:10px;
}.
it may help you.
use float: left property to other ul element, and display: inline-block to li element
try using this Jsfiddle code updated
Example below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
If it helps mark as answer.
you need to do something like the code I will link below:
.body {
margin: 0px;
padding: 0px;
}
.nav-bar {
padding: 0px;
width: 100%;
margin: 0px auto;
}
.nav-bar ul {
list-style-type: none;
}
.nav-bar li {
display: inline-block;
padding: 10px;
}
.left {
position: relative;
right: 30px;
}
.right {
float: right;
}
<html>
<body>
<div class="nav-bar">
<ul>
<li class="left">Home</li>
<li class="left">About</li>
<li class="left">Contact</li>
<li class="left">More</li>
<li class="right">Register</li>
<li class="right">Log In</li>
</ul>
</div>
</body>
</html>
Hopefully this works for you, any issues please report back. It worked in the fiddle so it should apply the same to your project.
Best of luck mate!
Editted on https://jsfiddle.net/ns82ne1z/4/
<div class="container-fluid">
<div class="navbar-inner site-top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</div>
Add in the following CSS
.site-top-nav li{
padding-left:15px;
padding-right:15px;
}
.navbar-nav>li {
float: left;
}
Hope this helps.
Related
So, I'm just starting with web dev and was learning bootstrap. This is my code,
<!DOCTYPE html>
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style type="text/css" media="screen">
.navcolor{
background-color: #042638;
}
.textcolor{
color: white;
}
.align{
margin-left: 80px;
}
.one{
width: 40px;
height: 40px;
color:white;
}
</style>
</head>
<body>
<nav class=" navbar navabar-default navcolor ">
<div class="navbar-header">
<img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png" >
IMGS
</div>
<ul class="nav navbar-nav ">
<li><a class="textcolor" href="#">About</a></li>
<li><a class="textcolor" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="textcolor" href="#">Sign Up</a></li>
<li><a class="textcolor" href="#">Login</a></li>
</ul>
</nav>
</body>
</html>
I know I should have a separate file for CSS, but I was just trying something. Now, this definitely seems very basic. I was expecting something like this.
But, what I got was, something like this.
Ignore the logo ofc. I'm more concerned about the fact that 'About' and 'Contact' are stacked over one other and also for some reason it is in the middle. I tried 'navbar-left' or 'pull-left' but it stays in the middle. Any help would really be appreciated.
You can place About and Contact next to each other using flexbox:
.navbar-nav {
display: flex;
}
As for bringing the links from the middle to the left, I'd recommend placing them in a new <div> and utilising flexbox with justify-content:
.links {
display: flex;
justify-content: space-between;
}
As is done in this snippet:
<!DOCTYPE html>
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css" media="screen">
.navcolor {
background-color: #042638;
}
.textcolor {
color: white;
}
.one {
width: 40px;
height: 40px;
color: white;
}
.navbar {
display: flex;
}
.navbar-nav {
display: flex;
}
.links {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<nav class=" navbar navabar-default navcolor ">
<div class="navbar-header">
<img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png">
IMGS
</div>
<div class="links">
<ul class="nav navbar-nav ">
<li><a class="textcolor" href="#">About</a></li>
<li><a class="textcolor" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="textcolor" href="#">Sign Up</a></li>
<li><a class="textcolor" href="#">Login</a></li>
</ul>
</div>
</nav>
</body>
</html>
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>
float: left;
and
display: inline;
are both failing to work.
What am I doing wrong? How can I make this navigation bar horizontal?
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
put your css inside style tags or an external css file and include it in the header section of your html
<style>
ul li{ display: inline;}
</style>
try the following code snippet, it might help you
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
list-style-type : none;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About </li>
<li id="navbar" class="active">Portfolio </li>
<li id="navbar" class="active">Contact </li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Changed
.navbar li {
to
li.navbar {
li.navbar {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
Is this what you are looking for?
Solved:
The
<li id="navbar" class="active">Home</li>
elements need the corresponding CSS to be
#navbar
and NOT
.navbar li
.navbar li should be used in the CSS for the html class attribute class="navbar li" whereas #navbar should be used the ID attribute
When I changed that, the CSS styling was applied to the html with the corresponding id attribute.
It seems you're doing things the right way, but your code sample misses some tags :
<html>
<head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-link" class="active">Home</li>
<li class="navbar-link" class="active">About</li>
<li class="navbar-link" class="active">Portfolio</li>
<li class="navbar-link" class="active">Contact</li>
</ul>
</div>
</nav>
<style>
.navbar li {
margin: 5;
padding: 0;
width: 80;
float: left;
}
</style>
</body>
</html>
will do the trick. You have to say to the browser, what it have to do with those lines : use Html <html> and apply that style using <style> . If your style directives have to be more important, I think that it could be a better way to create a second file that will contains all your css and to link it with your html document.
EDIT :
The css rule : .navbar li will find the navbar class and find all its li childs, so you can remove ids on each li and replace them by a class name
I hope it may help
I am trying to create a container with 2 tabs using nav-pills in bootstrap. However the gap (white space on the left hand side of the button) is not equal to the gap on the right hand side of the button. I have not added any special padding either.
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0">
<div class="container">
<ul class="nav nav-pills" style="width:96%;">
<li class="active" style="width:48%; text-align: center;">Home</li>
<li style="width:48%; text-align: center;">Menu</li>
</ul>
</div>
Give margin:0 auto; to the .nav-pills element. The .nav-pills has width:96%; so it is aligned to the left side of .container. By using margin:0 auto;, the .nav-pills is centered horizontally.
Jsfiddle
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0">
<div class="container">
//Add margin:0 auto;
<ul class="nav nav-pills" style="width:96%;margin:0 auto;">
<li class="active" style="width:48%; text-align: center;">Home</li>
<li style="width:48%; text-align: center;">Menu</li>
</ul>
You can use nav-justified for this and then just adjust the display rule for under 768px in case you don't want them to stack.
See working Example Snippet.
/**BORDER FOR DEMO ONLY*/
.nav.nav-justified {
border: 1px solid #f00;
border-radius: 4px;
}
/**BORDER FOR DEMO ONLY*/
#media (max-width: 767px) {
.nav-justified.nav-pills-nav > li {
display: table-cell;
width: 1%;
}
.nav-justified.nav-pills-nav > li > a {
margin-bottom: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h3>Won't stack on Mobile</h3>
<ul class="nav nav-pills nav-justified nav-pills-nav">
<li class="active">Home
</li>
<li>Menu
</li>
</ul>
</div>
<hr>
<div class="container">
<h3>Default: Will stack on Mobile</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Home
</li>
<li>Menu
</li>
</ul>
</div>
I"m trying to make a bootstrap nav bar like this :
I could manage only this one:
And here is my code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.nav{
position: absolute;
top: 5px;
right: 190px;
border-left: 3px solid #EEE;
border-right: 3px solid #EEE;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="./imgs/endorse-logo1.png" alt="logo">
</div>
<div class="navbar-header nav">
<ul class="nav nav-pills">
<li class="dropdown">
English<b class="caret"></b>
<ul class="dropdown-menu">
<li>Russian</li>
<li>Chinese</li>
<li>German</li>
<li>Italian</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
It isn't even responsive. How can I make a responsive nav bar properly?
If you take a look at the official documentation you will see that there is a lot of mistakes in your code:
you have two navbar-header element, you should have only one, and multiple <ul class="nav navbar-nav"> elements,
you need to wrap your navbar elements (<ul class="nav navbar-nav">) in a <div class="collapse navbar-collapse"> element in order to make it responsive,
you can get rid of your .nav css to fix the navbar top as you are already using navbar-fixed-top,
you are using <ul class="nav nav-pills"> where you should directly use <a class="dropdown-toggle">
etc...
Maybe you should retry to create the navbar from the beginning by following precisely the documentation.