what I'm trying to do is to split my navbar in left, center and right, on left it will be the Application name, on the center the different menu options but the text centered, on right should be the app logo (this will be hidden when minor resolutions appear) something like the below image
At the moment this is what I have (navbar title needs to be on the middle align, menu options and user info centered and the logo should be on right instead of next to menu)
<div class="navbar navbar-default navbar-static-top" 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="#">
<h2>Application Name</h2>
</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home</li>
<li>About</li>
</ul>
<p class="navbar-text">
<span class="welcome">
Welcome, Richard Sanchez
</span>
</div>
<div class="navbar-logo navbar-right">
<a class="navbar-brand" rel="home" href="#" title="Home">
<img width="300" height="40" src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png" class="img-responsive">
</a>
</div>
</div>
</div>
Here is a fiddle to play with
Pd. I'm using bootstrap 3.3.7
Related
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
I have navbar with menu, which changed to hamburger menu on mobile version. Also, I have two icons for language, which aren't in navbar, but I need them in hamburger menu.
Option to put language icons in doesn't work because I need them to the right, and then all menu list change the place
<nav class="navbar navbar-dark navbar-inverse" data-toggle="affix" id="navbar-spy" style="border:0px; border-radius:0px">
<div class="container-fluid">
<div class="zastave" align="right">
<img src="slike/srb.png" alt="">
<img src="slike/eng.png" alt="">
</div>
<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>
<span> <img class="logo_nav pull-xs-left" src="slike/logo.png"></span>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav p-t-1">
<li>MENI</li>
<li>ENTERIJER</li>
<li>CENOVNIK</li>
<li>REZERVACIJA</li>
<li>KONTAKT</li>
<!--<li>KETERING</li>-->
</ul>
</div>
</div>
</div>
</nav>
I'm trying to build a navbar with bootstrap. My navbar should have two elements:
Close-icon on the left side of the bar
Label element on the right side of the bar, but it should be placed left to the menu-icon (which is shown on small devices). If there is no menu-icon, the label element should be just on the right side of the bar
This is what I tried so far:
JSFiddle: http://jsfiddle.net/0jejx693/1/
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
<ul class="nav navbar-nav nav-pills navbar-right">
<li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li>
<li>
<a href="/link">
<span class="label"><i class="fa fa-commenting"></i> 10</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
So the result should look like this:
small
| [icon] [lable] [menu] |
big
| [icon] [lable] |
Updated fiddle. Hmm, sry cause I deleted "label" class from span, but it was not showing the "fa" icon. So, was only for test. And, there's a label left to toggle-menu. I think that's what you want, am I right?
http://jsfiddle.net/kqemk0zk/
.label-cont{
position: absolute!important; /*Important used only to example. Could be overrated with hierarchy*/
right: 60px;
}
Something like this?
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top">
<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 page-scroll" href="#page-top"><i class="fa fa-power-off"></i></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/link">
<span class="label"><i class="fa fa-commenting"></i> 10</span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This simple thing is frustrating me for hours. I have a simple navigation bar which has a brand logo. But the logo disappears sometimes(still loaded but hidden below) from the navigation bar.
HTML:
<nav class="header_blue navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-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 class="navbar-inner">
<a class="navbar-brand" href="">
<img id="my_img" style="display:block !important;" src="img/logo_img.png" alt="logo_img" class="img-responsive">
</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
</ul>
<div class="nav navbar-nav navbar-right" ng-hide="currentUserSignedIn">
<ul class="list-inline pull-right">
<li>
Register
</li>
<li>
<a href="" id="sign_in" data-target="login_modal" >Sign In</a>
</li>
</ul>
</div>
</div>
</div></nav>
CSS:
.header_blue{
background:none repeat scroll 0% 0% #073648;}
I am trying to push the navbar line (and obviously the content as well) down according to logo height. Here is my HTML code:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
</div>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
What I want:
What I get:
Note: Custom css classes have not much to do with the positioning.
You may try something like this:
HTML:
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
CSS:
a.navbar-brand { /*or add another class instead of changing this*/
display:block;
margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */
}
Just keep some margins on top and bottom of that <a> tag. Don't depend on other elements for margin of that <a> tag, instead apply cssrule on itself for it's margin.
Or just put in inside another .row:
<div class='row'>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
</div>
Close your the <div class="container"> and open a new container with a margin top around the second row of the nav bar.
Bootply example
Updated HTML:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
</div>
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
</div>
<div class="container new-nav-line">
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
.new-nav-line{
margin-top:20px;
}