I'm using twitter bootstrap.
I have its navigation bar on top, and it shrinks if I narrow down browser's width.
I don't want it. How can I?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
.
.
.
The fix for this lies in the CSS for responsiveness (responsive.css?)
Search for the
"container-fluid"
rule and disable it.
Use <div class="container"> instead of <div class="container-fluid">
for reference go through this link
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;}
Can anyone suggest why the first link isn't clickable & link to the index page within my header on my site using Bootstrap 2 - the link with the 'brand' class currently isn't clickable nor does it link to homepage
Any advice on how to fix?
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="brand" href="/"><img src="/images/logo.png" id="logo"></a>
<a class="btn btn-navbar btn-warning navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- extra html content below this line... -->
It's the clearfix class which made the navbar container sit on the top of your image.
After removing clearifx from this line of code:
<div class="nav-collapse collapse clearfix" id="navbar-collapse-main">
it's OK. You just might need to reposition the logo slightly.
More about clearfix class
Hi I am trying to customize the boostrap default navbar.
I do not expect you to do all my work, but I need help to style the li field so it hangs over the navbar.
How do I make that?
Code I have:
<nav class="navbar navbar-default navbar-fixed-top" 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="#mainNavigation-collapse">
<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 hidden-lg hidden-md hidden-sm" href="#">Caleum Wellness</a>
</div>
<div class="collapse navbar-collapse" id="mainNavigation-collapse">
<ul class="nav navbar-nav">
<li class="active">Om oss</li>
<li>Behandlingar</li>
<li>Tidsbokning</li>
<li>Blogg</li>
<li>Kontakta</li>
</ul>
</div>
</div>
</nav>
The first image show how it is now, and the second image is how I want it.
You can try the Bootstrap customizer http://getbootstrap.com/customize/
Just change less variables how you want and then download it.
Solved the issue by creating a background image with height lower than the navigation wrapper.
The wrapper is still the same size but it looks like it is smaller.
Here is the code for navbar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a 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>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="index.html">EasyUniv</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>Services</li>
<li>Campus</li>
<li>Advertise</li>
</ul>
</div>
</div>
</div>
</div>
The example is at: www.easyuniv.com/staging
when you make the screen smaller it hides the nav buttons correctly but they do not go into the little drop down like it should. also at certain widths there is weird padding.. been trying different things and can't get these to work.
Thanks
You need to include jQuery before bootstrap.