I am using bootstrap navbar, it has brand name on left and 2 icons glyphicon glyphicon-user and glyphicon glyphicon-bell on right.
When i am changing the resolution to less than 768, the brand name and both the icons are getting vertically aligned and height of navbar increases.
I do no want a collapse bar. and i want the icons to be fixed at right.
#Lior G is right, you can use default bootstrap styles (classes) to resolve your issue!
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav mobileNav pull-right">
<li class="pull-left">
<span class="glyphicon glyphicon-bell" aria-hidden="true" style="font-size:26px; color:white"></span>
</li>
<li class="pull-left">
<i class="glyphicon glyphicon-user" aria-hidden="true" style="font-size:26px; color:white"></i>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
jsfiddle-link
Use pull-left and pull-right with 2 navbar-header div's, since they do not attached to any #media queries.
Try this
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-user"></span></button>
<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-bell"></span></button>
</div>
Working Codepen
Related
I have a website with a horizontal navbar, works fine. At the appropriate breakpoints it collapses and you open it via the hamburger button.
Underneath I have a bootstrap row:
<div class="row">
<div class="col-xl-2 px-0">
<div class="container-fluid">
<div class="container show-not-on-mobile text-center pt-5"> <h5>Paintings</h5></div>
<nav class="navbar navbar-expand-xl navbar-light navbar-custom">
<div class="container mb-0 px-0 show-not-on-desktop">
<a class="navbar-brand" href="/paintings">Paintings</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mnav" aria-controls="mnav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fancy-toggler navbar-toggler-icon"></span>
</button>
</div>
<div class="container mb-0 px-0">
<div class="collapse navbar-collapse" id="malereinav">
<ul class="navbar-nav mr-auto mx-auto flex-column">
<li class="nav-item">
<a class="nav-link active rounded" title="Movement" href="/paintings-movement">
Movement
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="col-xl-10">
Gallery Content shown with #Columns
</div>
</div>
Everything works fine, except this breakpoint:
#media screen and (min-width:992px) and (max-width: 1280.98px){
#columns[data-columns]::before {
content: '3 .col-lg-4';
}
}
At this breakpoint nothing happens with this navbar:
neither the navbar is displayed horizontally nor vertically.
Also no mobile version with hamburger is displayed.
No matter if I use navbar-expand-xl or navbar-expand-lg or navbar-expand-md ...
Maybe someone has an idea, I would be very happy.
I have problem with positioning of buttons on bootstrap navbar. They are not aligned with website title and they are too close together. The code looks like this:
<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><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button></li>
<li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</nav>
https://jsfiddle.net/mleontenko/poqbkxrt/
I need to align buttons to website name and add a little bit of space between the two buttons. CSS trick that solves this would be appreciated.
Here you go with a solution https://jsfiddle.net/poqbkxrt/1/
li {
margin: 10px 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button></li>
<li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</nav>
Hope this will help you.
By default the .nav on the .navbar component relies on hyperlinks for its navigation. Those hyperlinks have padding defined by Bootstrap's CSS to properly space each item in relation to the .navbar-brand.
Since you are using <button> elements you will need to add your own CSS, such as the following:
.navbar-nav .btn {
margin-top: 8px;
}
This code is working for you !!
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
<ul class="nav navbar-nav ">
<li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span> </button>
<button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span> </button></li>
</ul>
</div>
</div>
</nav>
HAPPY TO HELP !!
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'm a newbie bootstrap user, currently I want to create a fluid navigation bar, but when I shrink the browser the navigation bar becomes weird.
Before shrinking:
After shrinking further:
As you can see, the second image is pretty bad.. One possible way I thought is to separate the words into 2 lines (e.g. line 1 - goto, line 2 - Hello_World!). Can anyone give me a better approach for this issue? Thanks in advance.
Current HTML code:
<nav class="navbar navbar-default">
<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 logo-container" href="#"><img class="logo" alt="Logo" src="images/test.png" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="code">goto </span><span class="section-name">Hello_World!</span></li>
<li><span class="code">goto </span><span class="section-name">About_Me</span></li>
<li><span class="code">goto </span><span class="section-name">Life_Graph</span></li>
<li><span class="code">goto </span><span class="section-name">Skill_Trees</span></li>
<li><span class="code">goto </span><span class="section-name">Feat_Stacks</span></li>
<li><span class="code">goto </span><span class="section-name">Codetact_Me</span></li>
</ul>
</div>
</div>
</nav>
HERE IS MY FIDDLE...
If my understanding for your quesetion is correct you can use .row & .col to block menu to new row
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-sm-1">
...
</div>
<div class="col-sm-11">
<div class="collapse navbar-collapse" id="myNavbar">
...
</div>
</div>
</div>
</div>
</nav>
You can change col-md-xx to make it wider or smaller
for more info
http://getbootstrap.com/css/#grid
I have a Bootstrap nav-bar, which collapses into a button, totally default.
In my nav-bar, I have a bunch of images, instead of text links. When the bar is collapsed, I would like these pictures to be smaller.
Is there any way to style my way out of this?
Can I give it another menu to use, when it's collapsed?
Example code (default Bootstrap):
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#FlagMenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Select plant</a>
</div>
<div class="collapse navbar-collapse" id="FlagMenu">
<ul class="nav navbar-nav">
<li>
<img src="~/Content/imgs/Flag_Dansk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_Tjekkisk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_Mexikansk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_Ungarsk.png" />
</li>
<li>
<img src="~/Content/imgs/Flag_China.png" />
</li>
</ul>
</div>
</div>
</nav>
You can overwrite parts of media queries styles of bootstrap by adding your own class to html-structure where you define styles (width, height, etc.) for the images.