I have spent already several hours trying to correctly position several elements in a fixed bootstrap navbar, but I do not manage to have exactly what I would like. This is what I have so far:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.aprentiko.com">brand</a>
<p class="navbar-text">title of the page</p>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
<li></span></li>
</ul>
</div>
<div class="navbar-header pull-right">
<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>
<ul class="nav navbar-nav">
<li><span id="audioInPause" class="glyphicon glyphicon-play"></span></li>
</ul>
</div>
</div>
</nav>
The problems I have are the following:
I would like to position the "title of the page" element in the middle of the screen, but it always stays in the left, next to the brand.
The audioControl item should be independent of the other icons in the right side (i.e. it should not collapse when the viewport becomes too small. I achieved the "not collapsing" part, but when the icons collapse I get a) the play button always goes in a second row, b) clicking on the collapsed button activates the play button, instead of opening the menu to select one of the collapsed items.
I created a jsfiddle at https://jsfiddle.net/cwx1wvo7
I can answer the first one quickly, but I don't know if it will work with collapse, you can play around.
I agree with the comment above about by MattD. As a twist, partition your nav using col-lg-xx col-md-xx etc then use text-center
As an example to give you and idea,
<div class="navbar-header pull-left col-lg-10 col-md-9">
<a class="navbar-brand" href="http://www.aprentiko.com">brand
<p class="text-center navbar-text">title of the page</p>
</a>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-2 col-md-3">
in fact, u should take a look at the bootstap.css to have an idea of the classes used to code elements.
the ms-md-auto move ur elements to the right:
.ms-md-auto {
margin-left: auto !important;
}
<ul class="navbar-nav ms-md-auto mb-2 mb-lg-0" >
Related
I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.
The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="caret"></span>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li>Home</li>
<li>Stuff</li>
<li>List Example</li>
<li>Contacts</li>
<li class="dropdown">User <span class="caret"> </span>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
Try adding this to the navbar-header
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</div>
and remove the visible-xs too from there.
Ok i have this fiddle: https://jsfiddle.net/9jb3Lp4k/ . My problem is that on smaller device when i hover over left side menu my right menu go bellow. Can i fixed that so that i get resizible right content. Any suggestion?
<nav class="navbar navbar-inverse sidebar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
<span class="navbar-brand"> <img src="{{asset('/assetsfront/img/night-life.png')}}"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="user-info">
<img src="{{asset('/assetsfront/img/defaultuser.png')}}">
<span class="username">username</span>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Galerija<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-picture-o"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Pregledaj galerije <span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-eye"></span></li>
<li>Dodaj galeriju <span style="font-size:18px;margin-right: 2px;" class="pull-right hidden-xs showopacity fa fa-plus"></span></li>
<li>Izmijeni galeriju<span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-edit"></span></li>
</ul>
</li>
<li >Logout<span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-user"></span></li>
</ul>
</div>
</div>
</nav>
You can resolve this issue through the display: flex; css property. wrap the navigation and content with a new div class (.new-class - same as like the below css example) and call the display:flex. Please see the code below.
CSS
.new-class{
display:flex;
}
Please see the updated jsfiddle.
I think the best would be I provide the website link which is : www.youthlife.de
I am trying to position the little brand logo closer to the navbar without changing the position of the navbar itself.
If I put a margin-left to the brand, the navbar moves as well. I don't get why. What regulates the distance between the brand and the navigation bar?
I don't know what size of height and width of your logo.
Here's what I have tried.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#"><img src=""/>
Start Bootstrap</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">
<li> About
</li>
<li> Services
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</nav>
This is the CSS:
.navbar-brand img {
width:90px;
height:25px;
display:inline-block;
margin-top:-3px;
}
You can check the demo HERE.
Now, let me know further if it is not what you wish.
Hint: Pls provide some codes to see what's been wrong with it.
I'm trying to create a webpage using bootstrap3 but have run into a problem in the navigation bar. I want the navigation links (there are 4 - "Web Design" "Development" "Photography" "Blog") to equally divide the space available in the horizontal navbar. At the min they are just piling up on the left. Here is a segment of the code - hopefully I haven't missed out an important bit. I have NOT amended the bootstrap CSS at all.
<div class="container-fluid">
<div class="row">
<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active col-md-3">
Web Design
</li>
<li class="col-md-3">
Development
</li>
<li class="col-md-3">
Photography
</li>
<li class="col-md-3">
Blog
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>
</div>
I forced a few changes in the bootstrap layout with a couple of css rules, see if this doesn't float your boat :)
http://jsbin.com/xeniwonujeti/1/
my css changes:
.nav { width: 100%;}
.nav li { width: 25%; text-align: center; }
Obviously this will limit dynamic menu changes and you'll have to change it if the amount of links changes.
I'm using a nav-bar from Bootstrap (http://twitter.github.io/bootstrap/components.html#navbar) apart from the links for different tabs which are on the left side of this nav-bar, I want to put my notification icons on the very right of it. How can I do this with CSS? I dont want to use pixels, I rather have it flexible with the size of window and go to the right of this nav-bar.
thanks
Just use two different UL like on the following code :
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li>THREE</li>
<li>LEFT</li>
<li>ITEMS</li>
</ul>
<ul class="nav pull-right">
<li>RIGHT</li>
<li>ITEMS</li>
</ul>
</div>
</div>
</div>
</div>
Link to a bootply : http://bootply.com/69056