I have a very simple Bootstrap Navbar that I am trying to do a little customization to. All I want to do is to pull the title all the left and for the 3 choices Home Menu 1 and Menu 2 to be pulled all the way right. I have tried to add pull-left and pull-right to my inline styling, but believe it is being over written.... Can anyone tell me how I can accomplish this? I will post image and markup below:
The image is what I currently have, not what I am trying to accomplish. The markup is my existing HTML.
Markup
<nav class="navbar navbar-inverse" style="margin-bottom: -5px !important;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li runat="server" class="dropdown">
Menu 1<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-pencil"></i> 3</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-folder-close"></i> 4</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-thumbs-up"></i> 5</li>
</ul>
</li>
<li runat="server" class="dropdown">
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-user"></i> 1</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-lock"></i> 2</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-log-out"></i> 3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Use navbar-right for your links and if you want them as far to the left and right on the screen use container-fluid instead of container.
See example Snippet.
<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" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">My Title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li runat="server" class="dropdown"> Menu 1<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-pencil"></i> 3
</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-folder-close"></i> 4
</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-thumbs-up"></i> 5
</li>
</ul>
</li>
<li runat="server" class="dropdown"> Menu 2<b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-user"></i> 1
</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-lock"></i> 2
</li>
<li class="divider"></li>
<li><i class="glyphicon glyphicon-log-out"></i> 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Related
I want two icons next to each other (nearly no space between them), I put them in same li and same div but they are now blue and not well positionned vertically, what bootstrap class or custom style or anything else should I use (just putting in 2 li doesn't make it, the icons have too much space between them) ? :
https://www.w3schools.com/code/tryit.asp?filename=FD6NR1HEOO3W
#import url('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-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
You should not use <div> inside <li>
I have used two different li for both icons and added two classes, check below snippet:
Note: You can adjust space between icons using by increasing padding
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-right li{
display:inline-block
}
.navbar-right li .left_padd {
padding-left:0;
}
.navbar-right li .right_padd {
padding-right:0;
}
<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-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="right_padd" href="#"><span class="glyphicon glyphicon-user"></span></a><li>
<li><a class="left_padd" href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
The problem is you have <div class="btn-group"> and you don't need it, also you have the two buttons inside only one <li>.
This is your code:
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
and should be like this: only one <li> per button, without the btn-group div:
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
Here is an example: https://www.w3schools.com/code/tryit.asp?filename=FD6OLHFYBBWZ
Apply color:white and padding-top to the spans that contain .glyphicon. This should help.
Change the markup for your nabvar containing the glyphicons from this:
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
to:
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-user"></span>
</li>
<li>
<span class="glyphicon glyphicon-log-in"></span>
</li>
</ul>
#import url('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-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
Or, don't create a second navbar at all.
Change:
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group">
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-log-in"></span>
</div>
</li>
</ul>
to:
<p class="navbar-text navbar-right">
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-user"></span></a>
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-log-in"></span></a>
</p>
#import url('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-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<p class="navbar-text navbar-right">
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-user"></span></a>
<a class="navbar-link" href="#"><span class="glyphicon glyphicon-log-in"></span></a>
</p>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
I am using bootstrap 3 with the standard css shipped with the package.
I have built a menu out of the basic structure provided in the examples and built this HTML:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<a class="navbar-brand" href="index.php"><img src="images/logo_small.png" alt="Montglane"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active voce">Home</li>
<li class="dropdown voce" id="movimenti">
Movimenti <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Timesheet</li>
<!--<li>Something else here</li>-->
<!--
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
-->
</ul>
</li>
<li class="dropdown voce" id="report">
Report <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Geco</li>
<li>Fatture</li>
</ul>
</li>
<li class="dropdown voce" id="anagrafiche">
Anagrafiche <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banche</li>
<li>Carte</li>
<li>Clienti</li>
<li>Commesse</li>
<li>Tipi Movimenti</li>
</ul>
</li>
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li></li>
</ul> -->
<p class="navbar-text navbar-right"><?php echo $_SESSION['nome_est']; ?></p>
</div><!--/.nav-collapse -->
</div>
</nav>
It works but when it comes to small viewports it stopped showing the hamburger. I have inspected the code and the menu options are there to be shown but I miss the three lines button to toggle menu visibility. What kind of mistake did I do?
Note that I didn't apply any custom css or js by now.
Now as answer ;)
You commented the HTML section of the button. See line 4 to 10. Button including 3 spans icon-bar.
you have commented hamburger menu section
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="images/logo_small.png" alt="Montglane"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active voce">Home</li>
<li class="dropdown voce" id="movimenti">
Movimenti <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Timesheet</li>
<!--<li>Something else here</li>-->
<!--
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
-->
</ul>
</li>
<li class="dropdown voce" id="report">
Report <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Geco</li>
<li>Fatture</li>
</ul>
</li>
<li class="dropdown voce" id="anagrafiche">
Anagrafiche <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banche</li>
<li>Carte</li>
<li>Clienti</li>
<li>Commesse</li>
<li>Tipi Movimenti</li>
</ul>
</li>
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li></li>
</ul> -->
<p class="navbar-text navbar-right"><?php echo $_SESSION['nome_est']; ?></p>
</div><!--/.nav-collapse -->
</div>
</nav>
In my bootstrap web app, on the navigation bar header, there is no space on the right hand side. And the logout link is very close to the right border.
How can I give some space on the right ?
Image:
index.html
<!-- Start of Navigation Menu -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="listController">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#/list">My Project</a>
</div>
<div class="collapse navbar-collapse">
<div class="bgContainer" style="background-image: url('images/bg_header.gif');">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-registration-mark"></i>List</li>
<li><i class="glyphicon glyphicon-fire"></i> Two</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-leaf"></i> Calendar <b
class="caret"></b></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><i class="glyphicon glyphicon-eye-open"></i> View Submission </li>
<li><i class="glyphicon glyphicon-eye-open"></i> View Submission </li>
<li><i class="glyphicon glyphicon-calendar"></i> Report </li>
<li><i class="glyphicon glyphicon-list-alt"></i> Template - </li>
<li><i class="glyphicon glyphicon-book"></i> Calendar</li>
<li class="dropdown-submenu"><a tabindex="-1"> <i class="glyphicon glyphicon-cog"></i>Generate
</a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-cog"></i> Report </li>
<li><i class="glyphicon glyphicon-cog"></i> Draft </li>
</ul></li>
<li><i class="glyphicon glyphicon-eye-open"></i> Feedback</li>
</ul></li>
<li><i class="glyphicon glyphicon-blackboard"></i> Dashboard</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i>
{{fullName}} <span class="caret"></span></a>
<ul id="g-account-menu" class="dropdown-menu" role="menu">
<li>My Profile</li>
</ul></li>
<li><i class="glyphicon glyphicon-lock"></i> Logout </li>
<!-- Spacer -->
<li> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- End of Navigation Menu -->
This might be caused by .navbar-right class due to positioning or overflow issues with navbar container.
Default bootstrap rule:
.navbar-right {
margin-right: -15px;
}
Override it with:
.navbar-right {
margin-right: 0;
}
Thanks guys.
I just added a white space to the last menu item using
<li><i class="glyphicon glyphicon-lock"></i> Logout </li>
I have the following code, what I want is to align the logout button right hand side and three modules (contact us, about epm and modules) at center, so how can I do this with the help of bootstrap.Thanks in advance.
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">About EPM</li>
<li>Contact Us</li>
<li class="dropdown">
Modules <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Employer Section</li>
<li class="divider"></li>
<li>Employee Section</li>
<li class="divider"></li>
<li>Client Section</li>
<li class="divider"></li>
<li>Project Details</li>
</ul>
</li>
<li>
<a onClick="logout();" class="navbar-brand pull-right">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>
To right align the logout object, you can use bootstrap's navbar-right class.
To center align the other links you can use the following CSS:
#bs-example-navbar-collapse-1 { text-align:center; }
.centered-navbar { display:inline-block; float:none; vertical-align:top; }
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</a>
</div>
<ul class="nav navbar-nav centered-navbar">
<li class="active">About EPM</li>
<li>Contact Us</li>
<li class="dropdown">
Modules <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Employer Section</li>
<li class="divider"></li>
<li>Employee Section</li>
<li class="divider"></li>
<li>Client Section</li>
<li class="divider"></li>
<li>Project Details</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a onclick="logout();">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Bootply here: http://www.bootply.com/ddmUGfX0PI
I have a navbar in a desktop site, but I want it in mobilesite like a sidebar.
How to convert the navbar to sidebar in the mobile site?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Site name
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home">Home <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>page 1</li>
<li>page 2</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>username</li>
</ul>
</div>
</div>
</div>