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.
Related
I have a problem with my bootstrap navbar, when it's full screen a small icon-bar appear on top, and when resizing the window the same icon-bar remain there and the button doesn't appear, first here's the code:
<header>
<nav role="navigation" class="navbar navbar-inverse" style="border-radius:0px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Movies List</li>
<li>Genre List</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</header>
And here's a screenshot of what it looks like:
Looks like you may be missing the javascript component include:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Its the issue from your Javascript with CSS, Button is always reflecting which means your Nav Bar is not converting as Button when image is enlarged
You can use this its easy and convenient Boot Flat
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.
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<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 navbar-fixed-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" 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="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</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>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
I am trying to insert the user's avatar next to the username in the bootstrap 3 header. I'm having a very hard time achieving this, and I don't want to hack into the provider's css. Any one has already done this ? Thanks for your help
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Foo's Bar
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Awesome link</li>
<li>More Awesome link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Something <span id ="toto" class="badge" style="#danger">0</span>
</li>
<li>
<li><img src="http://placehold.it/30x30"><span class="header-username">Chuck Norris</span></li>
<li>Log off</li>
</ul>
</div>
</div>
</div>
Edit : the Bootply's link, because that's what friends do ! http://www.bootply.com/X4FhzJiP3T
The avatar appears next to the username. If it's a styling or placement issue you're experiencing, just add a custom class to the avatar image and style accordingly
.avatar {
/* put custom avatar css here */
}
I also added the .img-responsive class to the avatar...
<li>
<a href="#">
<img src="http://placehold.it/30x30" class="avatar img-responsive">
<span class="header-username">Chuck Norris</span>
</a>
</li>
I have markup defined in the page as below:
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-pills">
<li class="active">Home
</li>
<li>Companies
</li>
<li>Help
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul class="breadcrumb">
<li>Home
</li>
<li>About
</li>
<li class="active">Help
</li>
</ul>
</div>
</div>
When the page renders the breadcrumb hides behind the navbar. Any bootstrap way of fixing it? Or is this a bug?
Ps: jsFiddle : http://jsfiddle.net/KNsYt/2/
It is clearly defined in bootstrap documents itself as below:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
So, give 50 or more pixels of padding to the body to solve the issue. check this fiddle.
Make sure to include this after the core Bootstrap CSS.
body {
padding-top:60px
}