I have a Bootstrap Navbar, that I am trying to have set as simply a hamburger for the entire window except when it stretches out to about 700px (when it can show all the nabber drop downs without stacking). This works until about 400px, at which point the 'home' button and 'hamburger' seem to shift closer to the middle of the nabber, and dont drop down properly. I have tried using a pull-left and pull-right class for each but that leaves them where they are. My nav bar is as such:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="index.html">Home</a>
</div>
with the following CSS:
#media (max-width: 1200px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
Try to remove the container inside the nav element. see the bootstrap examples there is a container where the two iems are closer to the middle...
Related
Using Bootstrap 3.3.7
I have the following markup:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Company Name <img src="https://via.placeholder.com/220x36">
</a>
</div>
</div>
All I'm trying to do is get the logo image to appear vertically centre inside .navbar-brand
Instead it renders like this:
I want it to render like this:
The only way I could make it look how I wanted is by applying hacky CSS:
img {
margin-top:-7.5px;
display: inline-block;
}
Fiddle is here: https://jsfiddle.net/swzj0uk0/1/
I've had a look at Vertically align a navbar-brand with bootstrap and various other posts on vertical alignment.
Some posts have suggested setting a height: attribute on .navbar. I don't understand why that would be necessary because the default navbar height is 50px and my image is only 36px high.
Please can someone help?
You could add some custom style and set display: flex and align-items: center on navbar-brand element.
.navbar-brand {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Company Name <img src="http://via.placeholder.com/220x36">
</a>
</div>
</div>
</nav>
I am trying to make a full length navbar logo with links under it which are justified to the right like so:
If possible, I want the rainbow lines to extend left and right and the actual logo to be somewhat centered/fixed. However I really suck at CSS (I can't even resize correctly), and it comes out not full length and covers the rest of the page like this:
_Layout:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header navbar-brand">
<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>
</div>
Site.css:
.navbar-brand {
height: 120px;
margin: auto;
width: 100%;
padding: 0px; /* firefox bug fix */
background-image: url('Site/Header_FeinTune-logo-banner.png');
background-repeat: no-repeat;
}
Please write navbar-brand like this inside of navbar-header
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
</div>
Try using container-fluid instead of container. That will set a full screen width.
<div class="navbar navbar-fixed-top">
<div class="container-fluid">
...
I want to make my logo overlap my navbar but i dont know how. I tried to increase the size of the picture but that didn't work out, the navbar just enlarged. I also want it to be in the same div class because else it won't be nice on the mobile version of the site. I'll add pictures of what it looks like and what i want it to be and the code. Thanks in advance
Code:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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-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>
<img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand">
<a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a>
</div>
give your logo a class of "logo" then add:
.logo {
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
fix your nav bar as well.
Hope that helps!
Just put the logo outside the nav bar div. And align it top:0px left:0px.
Or if you want the logo on the left at all times then just float it left.
I am new to bootstrap and I'm trying to understand the navbar, I tried putting a background image to the navbar setting an ID to it:
HTML:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Tutorial</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
#myNavbar{
background-image:url(../images/image1.png);
background-size:cover;
}
what I am wondering is if there's a way to resize the height of the navbar according to the size of image1.png...
The image has an initial size of 1280x150 px and ends up being 400x50, and I want the bar to have the same sizes, because as it is right now, it starts on 1280x50 and ends up in 400x50, which crops the image.
I'm having trouble understanding..are you asking for the navbar to be 400px tall or 1280px tall?
Get rid of your mention of the #myNavbar ID altogether and try this:
.navbar-default
{
background-image:url(../images/image1.png);
background-size:cover;
height:150px;
}
#media only screen and (max-width: 400px){
.navbar-default
{
background-image:url(../images/image1.png);
background-size:cover;
height:50px;
}
}
I have an idea and not sure how to get it to work.
I have a bootstrap navbar on my site that has links and a "brand". The brand is centered within the navbar using this modification. Bootply
Instead of setting the navbar up like this:
{ (link)(link)(link)(....bunch of empty space....)(BRAND)(....bunch of empty space....)(link)(link)(link) }
I would like the navbar to set up like the diagram bellow.
{ (....bunch of empty space....) (link)(link)(link)(BRAND)(link)(link)(link) (....bunch of empty space....) }
I am very new to coding so please give me some time on the response to any questions you may have.
Thanks!
Just add padding to the left of the first link.
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Center 1</li>
<li>BRAND</li>
<li>Center 3</li>
</ul>
</div>
</nav>
CSS
#media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Fiddle
http://jsfiddle.net/52VtD/9483/