I want to make Bootstrap's navbar appear at the top on desktop view and at the bottom on mobile view. It is possible? How can I do it?
There is my actual HTML for top navbar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="fa fa-cloud-upload fa-fw"></span> GitUp</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><span class="fa fa-arrow-left fa-fw"></span> Selección de idioma</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<code><span class="fa fa-code"></span></code> por Federico Damián <span class="fa fa-caret-down"></span>
</a>
<ul class="dropdown-menu">
<li><span class="fa fa-home fa-fw"></span> <strike>Mi casa</strike></li>
<li class="dropdown-header">Contacto</li>
<li><span class="fa fa-github fa-fw"></span> GitHub</li>
<li><span class="fa fa-twitter fa-fw"></span> Twitter</li>
<li><span class="fa fa-facebook-official fa-fw"></span> Facebook</li>
<li><span class="fa fa-google-plus-square fa-fw"></span> Google+</li>
<li class="dropdown-header">Mis proyectos</li>
<li><span class="fa fa-cloud-upload fa-fw"></span> GitUp</li>
<li><span class="fa fa-shield fa-fw"></span> A Shell Blocker</li>
<li><span class="fa fa-arrow-circle-down fa-fw"></span> RoseSpine</li>
<li><span class="fa fa-code fa-fw"></span> KawaiiCode</li>
<li class="dropdown-header">Otros</li>
<li><span class="fa fa-file-code-o fa-fw"></span> Bootstrap</li>
<li><span class="fa fa-fort-awesome fa-fw"></span> Font Awesome</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Take off the navbar-fixed-top class and add your own css
.navbar-inverse {
position: fixed;
top:0;
left: 0;
width: 100%;
}
#media screen and (max-width: 767px){
.navbar-inverse{bottom: 0; top:auto;}
}
Then at max width 767px screens your navbar will be fixed on the bottom.
Related
I try to align my navbar placed at the top of my webpage, but somehow one of items appears straight down "Kontakt".
I would like all items i have to be in same line. Second issue is i cannot make my logo when click on it redirect to my page at the top again.
Code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<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/ico2.png" class="img-responsive" alt="logo">
</div>
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<div class="col-md-8 col-xs-12 nav-wrap">
<ul class="nav navbar-nav">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
<!-- <div class="social-media hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li>
<i class="fa fa-facebook"></i>
</li>
</ul>
</div> -->
</div>
</div>
</nav>
You don't need the wrapping div#bs-example-navbar-collapse-1s for a navbar to work.
And wrap a link tag around the image to redirect it to your homepage.
Update:
Issue 1) There are limitations to how many items Bootstrap can show in a navigation bar. Please check the docs and read the limitations.
Issue 2) I have fixed the code. Please ensure that jQuery and bootstrap JS files are loaded.
Issue 3) I cannot recreate the issue. It seems related to the logo size. Can you post a jsFiddle?
Updated Here is the fixed code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="//www.your-any-webste.com/"><img src="img/ico2.png" class="img-responsive" alt="logo"></a>
</div>
<ul class="nav navbar-nav collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
</nav>
Logo Centered Inside Navbar
I try to achieve it using bootstrap..
But I don't want to collapse the logo part, only collapse other li.
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li style="margin-right: 80px"><a href="articles.html"><i class="fa fa-pagelines" aria-hidden="true"></i>
Articles</a></li>
<li style="margin-left: 80px"><a href="signIn.html"><i class="fa fa-sign-in" aria-hidden="true"></i>
Sign in</a></li>
<li class="active"><a href="signUp.html"><i class="fa fa-sign-in" aria-hidden="true"></i>
Sign up</a></li>
</ul>
</div>
<div style="float:none">
<img src="../image/uoblogo.png" height="60px" width="200px" >
</div>
</div>
</nav>
</header>
This has basically been answered on SO before. You'll need to tweak the CSS for your image height, etc.., and keep the navbar-brand out of the navbar-collapse
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-brand > img {
display: initial;
}
.navbar-toggle {
z-index:3;
}
http://www.codeply.com/go/G5uYBjmKkf
Move image inside the ul and apply vertical-align to each li would fix your issue
check this codepen
change your mark up to the following
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#">
<span class="glyphicon glyphicon-home icon" aria-hidden="true"></span> Home</a>
</li>
<li>
<i class="fa fa-pagelines icon" aria-hidden="true"></i>Articles
</li>
<li>
<i class="icon fa fa-sign-in" aria-hidden="true"></i>Sign in
</li>
<li class="img">
<img src="https://lh6.googleusercontent.com/-lLR_c-yGAKc/AAAAAAAAAAI/AAAAAAAAGoY/3TnWGhgp4-0/s0-c-k-no-ns/photo.jpg" height="60px" width="200px">
</li>
<li class="active">
<i class="icon fa fa-sign-in" aria-hidden="true"></i>Sign up
</li>
</ul>
</nav>
</header>
and css to the following
ul li a{
line-height:50px!important;
vertical-align:bottom;
}
Hope it helps
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 am trying to align social media icon with my navbar menu to
the right but it is not working there is a gap when I am doing
it.
The social icon is in a separate row
The navbar is also in a separate row
I just want to align them to the right.
The padding-right and pull-right is not working.
Please help, Thank you very much in advance.
CSS code
.navbar-collapse {
padding-right: 0px;
margin-right: 0px;
}
HTML codes
<div class="row" style="height: 40px;">
<div class="container">
<div class="social pull-right">
<ul>
<li><i class="fa fa-lg fa-phone"></i>+65 652 225 25</li>
<li><i class="fa fa-lg fa-weixin"></i></li>
<li><i class="fa fa-lg fa-envelope-o"></i></li>
<li><i class="fa fa-lg fa-facebook"></i></li>
</ul>
</div>
</div>
</div>
<!--Navigation Menu and Carousel -->
<div class="row" style="background-color: black">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<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" href="index.html">
<img src="images/logo.png" alt="img">
</a>
</div>
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORKS</li>
<li class="dropdown">
ABOUT <b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>LinkedIn</li>
</ul>
</li>
<li class="active">CONTACT</li>
</ul>
</div>
</nav>
</div>
</div>
try this
.social ul li{
float:right;
list-style:none;
padding-right:15px
}
<div class="social col-lg-6 pull-right">
DEMO
Try something like this, using the navbar-right class from Bootstrap:
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>SERVICES</li>
<li>WORKS</li>
<li class="dropdown">
ABOUT <b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>LinkedIn</li>
</ul>
</li>
<li class="active">CONTACT</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-lg fa-phone"></i>+65 652 225 25</li>
<li><i class="fa fa-lg fa-weixin"></i></li>
<li><i class="fa fa-lg fa-envelope-o"></i></li>
<li><i class="fa fa-lg fa-facebook"></i></li>
</ul>
</div>
I have a basic BootStrap 3 nav header. I would like to separate the existing header so that I have the single dropdown item on the far right, and the rest of the other main menu items to be on the far left. Not sure how to do this?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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" href="index.html">Cost Tracking</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
<button type="button" class="btn btn-primary btn-sm">Project Details</button>
<button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
<button type="button" class="btn btn-primary btn-sm">Address Book</button>
<button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
<button type="button" class="btn btn-primary btn-sm">Reports</button>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li class="background-color:#333">
<i class="fa fa-edit fa-fw"></i> Project Info
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Roles
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Surcharges
</li>
<li>
<i class="fa fa-group fa-fw"></i> Project Crews
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Employees
</li>
</ul>
<!-- /#side-menu -->
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
According to the docs to have a navigation over to the right hand side of the navbar you need to place it in it's own <ul>:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
As a side note, the only direct child of a <ul> can be a <li>, so your <button>s need to be wrapped in list elements:
<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>
Demo
If you don't want it in a separate list, then you'll have to override the float on the <ul> and then float the final <li> right. You'll also need the .dropdown-menu-right class on the dropdown <ul>.
...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right dropdown-user">
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
CSS
.navbar-nav {
float: none;
}
Demo