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.
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">
...
Following this page to use image logo instead of text for navbar brand, I came across this problem that the portrait logo has been cut off by any content/ text/ image/ carousal that comes after it.
How can I fix it?
<!-- 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>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x200&text=Logo" alt="">
</a>
</div>
Result:
Add a max-height to the img.
max-height: 100%;
height: 100%;
width: auto;
Try adding a z-index to your nav bar like so in your CSS file as it looks like your foreground image is overlapping it
.navbar-header {
z-index: 100;
}
Apologies if this has already been asked, but I am trying to center my navbar if the user shrinks their display.
Right now I have the navbar-items floated to the right and the brand on the left for large displays. These remain on the right and left as the display shrinks.
I'd like for them to be centered instead when the display shrinks.
For large displays this is what I want. (What I'm getting now)
For small displays I want the navbar and brand to be centered. (Not what I'm getting right now)
It may not be the best way to do it, but you could just use an image instead and then apply the "center-block" class to it
<nav class="navbar navbar-default 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>
<img class="img-responsive center-block" src="img/logo.png" alt="">
</div>
Instead of using the branding of Bootstrap 3, I am after a responsive navbar that has my logo at the leftmost position of the navbar with required menu options just next to the logo on the navbar.
The issue I am not sure how to handle is that, as I want this navbar to be responsive, when the screen size is reduced to say a iPhone size, I want my typical Bootstrap hamburger menu positioned to the right-most of the navbar and when pressed, will reveal my menu items only but at the same time, I want my logo to always maintain the left-most position on my navbar, no matter what screen resolution is used.
I have provided the basic structure of what I have at the moment but unsure how to include my logo or for examples sake, a link for now to always remain on the navbar and always at the left-most position.
I have created http://www.bootply.com/HcZhCxMC4s for sample but it's not perfect as I am unsure how to position logo/link with menu items.
<nav class="navbar navbar-default" role="navigation">
<ul class="my-logo">
<li>Logo Link</li>
</ul>
<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 pull-left">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</nav>
You just need to use the same markup of the Bootstrap Navbar ...
<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>
/*YOUR LOGO OR LINK HERE WITH THE CLASS NAVBAR-BRAND*/
<a class="navbar-brand" href="#">Logo Link</a>
Check the BootplyDemo
you may want to add some styling:
css:
#media all and (max-width: 768px) {
.navbar-header {
position: absolute;
right: 0;
top:0;
}
.my-logo {
height: 50px;
padding-bottom: 0;
margin-bottom: 0
}
.my-logo li a {
line-height: 50px;
}
http://www.bootply.com/9KstQ2THvF#
Is this what you're after?
simplest answer on bootstrap's documentation page :
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>