Bootstrap nav pill left and right padding are not equal - html

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>

Related

Navbar stacked under one another and also not aligned as desired

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>

Navbar - Position element in center and fix navbar

I am trying to implement a navbar and I want to position several elements in three different positions (align left, right and center).
My problem is that the elements in the center, are not centered on the screen, can someone help me solve my problem and understand what my mistake?
Is there also a way to make the navbar fixed, ie when scrolling it never disappears?
Thanks!
My code DEMO
HTML
<nav class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-center divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<button>My buttons</button>
<button>My buttons</button>
</li>
<li class="nav-item">
<button>My buttons</button>
</li>
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
<li class="nav-item">
<a class="btn"> <img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
</ul>
</nav>
I don't know if I understand your question, but if I do I think I have the answer, You can do what you write just by giving at the left & right "group" of the navBar a specific margin, You have to set a div's width first, in this case each div has a width of 20% (60% tot.), the left div has a margin-right of 20% and then the riht div has a margin-left of 20%, to get everything fully centred you have to set div's text-align to center, You can run my code just by clicking on run code snippet, below:
.navBar {
display: flex;
position: fixed;
top: 0;
left: 0;
background: #ccc;
width: 100%;
padding: 5px 0;
}
.navBar div {
width: 20%;
text-align: center;
}
.navBar div a {
margin: 0 4px;
padding: 0 4px;;
background: rgb(0, 0, 0);
color: #fff;
text-decoration: none;
}
.left {
margin-right: 20%;
}
.right {
margin-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navBar">
<div class="left">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
<div class="center">
4
5
6
</div>
<div class="right">
7
8
9
</div>
</div>
</body>
</html>
To fix the navBar at the top I used "position: fixed" but even "position: sticky" is good.
.topfixed{
position: sticky !important;
top: 0;
z-index: 10;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar nabBarContainer topfixed">
<ul class="nav divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-center divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-end divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
</ul>
</nav>
<div style="height:1000px;"></div>
To fix van header.. you can add the class below:
HTML
<nav class="navbar nabBarContainer topfixed">
CSS
.topfixed{
position: sticky;
top: 0;
z-index: 10;
}
Not sure which buttons you want to center.. there 8 buttons.. how do you trying to get them aligned?
//For fixed navbar:
position: fixed;
//For centering an element:
margin: 0 auto;
//For placing an element at the right side:
position: absolute;
right: 0;
top: 0;
//For placing an element at the left side:
position: absolute;
left: 0;
top: 0;

How to divide menus to left and right in bootstrap

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.

making a nav bar in bootstrap

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.

Bootstrap 3 header looking incorrectly on Firefox

I have problem with coding a header, the header I have coded is being displayed well in Chrome, but its not in Firefox. (In Firefox its a bit Missy).
(the header is responsive and coded using Bootstrap 3)
photos explains the problem:
The header In Chrome:
(nice and clean)
The header In Firefox:
(missed up)
this problem happened when I made the top bar.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom4.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="js/respond.js"></script>
</head>
<body>
<!-- top bar starts -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-xs-6">
<ul class="social-icons">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</div>
<div class="col-xs-6">
<ul class="sign-options pull-right">
<li>sign in</li>
<li><span>/</span></li>
<li>sign up</li>
</ul>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end top-bar div -->
<!-- top bar ends -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#greeny-header">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" alt="Logo" class="img-responsive">
</div>
<!-- End Brand and toggle-->
<!-- navbar collapse -->
<div class="collapse navbar-collapse" id="greeny-header">
<!-- navigation list -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Who are we</li>
<li>Action</li>
<li>List</li>
<li>Option</li>
<li class="divider"></li>
<li>Separated link</li>
<li>Separated link</li>
<li class="divider"></li>
<li>Action</li>
</ul>
</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Contact</li>
<li><span class="fa fa-search"></span></li>
</ul>
<!-- end navigation list -->
</div>
<!-- end navbar-collapse -->
</div><!-- end container -->
</nav>
<!-- Javasctipt -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
the CSS
/*
*********************
* =header
*********************
*/
.navbar-default{
height: 100px;
}
#greeny-header{
margin-top: 25px;
}
.navbar-header a{
margin-top: 15px;
}
.navbar-header a{
padding-top: 0;
padding-bottom: 0;
}
.navbar-nav span{
font-size: 25px;
}
.navbar-toggle {
position: absolute;
float: none;
right: 0;
top: 5px;
}
/*
*********************
* =top-bar
*********************
*/
.top-bar{
background-color: #2b2b2b;
height: 40px;
}
.social-icons{
margin-top: 2px;
padding-left: 0;
}
.social-icons li{
display: inline;
font-size: 23px;
padding-right: 20px;
}
.social-icons span{
color: #a59f9a;
}
.social-icons span:hover{
color: #e1e1e1;
}
.sign-options{
margin-top: 7px;
}
.sign-options li{
display: inline;
font-size: 14px;
text-transform: uppercase;
padding-left: 7px;
}
.sign-options a{
color: #b3aca7;
text-decoration: none;
}
.sign-options a:hover{
color: #e1e1e1;
}
.sign-options span{
color: #d79450;
}
try to wrap any div with container div inside to row. I did it in this Demo.
Basically used your code and wrapper every section into row class. I tested with browser stack and it looks fine now.
I added the link to new screenshot "Win XP, FF v15.0". Here to screenshot
Add the float : left property to the logo style.
This is why I love Firebug. Looking at the computed styles and the layout will give you your answer right away. There are two usual suspects in this type of problem: 1) the display styles are not set to inline; or 2) There is a problem with the float.