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">
...
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>
This question already has answers here:
What is the difference between Bootstrap .container and .container-fluid classes?
(8 answers)
Closed 5 years ago.
enter image description here
here's my codes.
<header class="top-nav">
<div class="container">
....
</div>
</header>
that container has 'width : 720px' , 'padding : 0 15px' and 'margin: 0 9px'.
I think It has right width (768px) on iPad(768px x 1024px), but that isn't to fit my page. How can I solve this?
++ I work on Chrome develope tool.
container => container-fluid isn't work for me :(
after using container-fluid, width=738, padding=0 15px, I think It is right too, but It has same problem
container-fluid will be used for 100 % screen.
<header class="top-nav">
<div class="container-fluid">
....
</div>
</header>
if its not work, then try like this, and add styles like below
.newclassname {
padding: 0px;
}
Lets try this,
<nav class="navbar navbar-default">
<div class="container-fluid">
...
</div>
</nav>
Please try class="container-fluid".
Use the class container-fluid instead. Example code:
<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="#bs-example-navbar-collapse-2">
<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="#">Bootflat</a>
</div>
</div>
</nav>
Manually you can set container width in style.css page like .container{width:1180px;}
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.
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>
I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:
<div class="navbar navbar-fixed-top">
This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)
example
<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>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Get started
</li>
...
<li>
Customize
</li>
</ul>
</div>
</div>
</div>
</div>
or throw
.navbar {
max-width: 1170px; /* width of .container */
margin: 0 auto;
}
into the css
You should have a container class nested inside your navbar
<div class="navbar navbar-fixed-top">
<div class="container">your menu and logo go here</div>
</div>
That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%