I was wondering what does cause the li elements to stack on each other when I use nav-justified.
I ve read there is an issue with IE older versions, but I'm testing it on a new version Chrome.
<div id="header" class="row">
<div id="backgroundImage" class="pagebg"></div>
<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li>Home</li>
<li>News</li>
<li>Forum</li>
<li>Support</li>
</ul>
</div>
</div>
This is my first actual Bootstrap Website and I know there is still lot to learn.
There was nothing about the issue in Bootstrap Doc.
Could something being overriding it?
I 've read that there is a bug in safari browsers while using nav-justified.
Is it a bad idea to use nav-justified? Should I use css to manipulate the text?
Or is there a simple explanation on why is bugging and stacking everything together?
Thank you in advanced
Remove navbar-nav class from the <ul> element inside
<div id="collapse" class="collapse navbar-collapse">...</div>
If it's set, following CSS rule is applied to your <li> element:
#media (min-width: 768px)
.navbar-nav > li {
float: left;
}
}
The float: left causes that "stack" effect.
According to the documentation Justified
Easily make tabs or pills equal widths of their parent at screens
wider than 768px with .nav-justified. On smaller screens, the nav
links are stacked.
Without further CSS tuning, the nav-justified only works for nav-pills and nav-tabs, try changing navbar-nav to tabs or pills.
see http://jsfiddle.net/x3yz13c5/5/
If you insist using navbar-nav try something like
.navbar-nav > li {
float: none;
}
Similar thread can be seen here How to justify navbar-nav in Bootstrap 3
Related
I am building a travel website with Bootstrap Studio -> http://stackoverflowquestion.bss.design/
It's going well so far, except for one issue: when reducing the screen size, while the logo does decrease in size, it takes up the whole navbar and pushes the burger menu down.
Now, my initial instinct is to remove img-responsive and manually enter #media queries in the CSS so that the image is the perfect size for every screen type. However I'm pretty sure that this is not the best or most efficient way of solving the issue.
Here is my nav HTML:
<nav class="navbar navbar-default navbar-fixed-top navbar-fixed-top transparent">
<div class="container-fluid">
<div class="navbar-header">
<img src="Logo_SmallCompass.png" height="100px" class="img-responsive" id="logo" />
<button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right" id="right-links">
<li role="presentation">hello </li>
<li role="presentation">test </li>
<li role="presentation">bye </li>
<li role="presentation">about </li>
<li role="presentation">Contact </li>
</ul>
</div>
</div>
Any help or advice is greatly appreciated!
Many thanks in advance
Just add 1 media query like this:
#media (max-width: 600px) {
a.navbar-brand.navbar-link {
width: 80%;
}
}
This will make sure that the hamburger will stay at the top right.
How can i get different menu styles in a layout.
For example in the desktop view is there home, profile and messages and in the responsive mobile layout should there be a icon before each menu point. but not in the desktop version.
I'm using bootstrap as framework and i tried couple of things but it didnt worked out for me.
<header role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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 and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
Do i have to create a extra mobile menu and display the normal menu off if the viewport ist smaller than desktop?
Jsfiddle
I think what you need are media-queries.
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Example:
body {
background-color:lightgreen;
}
#media only screen and (max-width: 500px) {
body {
background-color:lightblue;
}
}
When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
So you can define different styles for desktop and mobile view.
You can hide the icons on desktop.
And please do not use JQuery like linusg said. JQuery is outdated it was a long time a realy good framework but today it isn't anymore. Use normal javascript (use the newest standard Ecmascript6 and maybe Ecmascript7).
Its as easy as Zlatko Vujicic has commented: just add a media query in your css that sets display: none for the small-device layout when a specific size is reached.
While im sometimes get in trouble with this, you can also use javascript (jquery) to hide the mobile navigation.
Hope this helps
Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
I'm using the navbar example:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">Create Single Page</a>
</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">
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
But when the screen enters 261px in width, the collapsible button pushes down the title of the site, making things awkward looking. I tried wrapping the "a tag" with a column but just puts a word break.
261px is extremely narrow -- very few modern devices are so low-resolution, and users generally do not expect a site's content to be usable or readable at this size.
So I'd recommend either ignoring the issue entirely (like Bootstrap itself does) or setting a minimum width in CSS like this (depending on the rest of your markup and styles, you may want to change body to a selector for your outermost container):
body {
min-width: 280px;
}
Which will add horizontal scrollbars when the page width goes below 280px, instead of attempting to be responsive to so far down a size.
If you absolutely must support a view this narrow, you could add new media queries to the CSS like:
#media screen and (max-width: 270px) {
// tiny styles for your site logo here, e.g.:
.navbar-brand {
font-size: 0.5em;
}
}
...to size down the title as needed.
I was trying to center this: http://jsfiddle.net/MikeStardust/hwhS5/ navigation bar but no luck...
By center i mean the elements aligned in one single line in the center of the navigation...
looked up a few solutions but none worked, resulted in a center aligned navigation bar with one element per line.
Bar html: (css & html on the jsfiddle)
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Forums</li>
<li>Servers</li>
<li>Help Center</li>
<li>Vote</li>
<li>Donate</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.navbar
I have this:
And would like to have this:(Result from photoshop)
Try changing the display value of .navbar-nav to inline-block and then applying text-align on its parent to control alignment.
If you need to change the mobile view alignment you can re-apply text-align at that breakpoint.
.navbar-nav {
display: inline-block;
}
.navbar-default {
text-align: center;
}
Example: http://jsfiddle.net/hwhS5/2/
use bootstrap class="justify-content-center"