I have modified the navbar in bootstrap to use x-scroll instead of the hamburger/dropdown style. The problem I am having is .navbar-nav and .navbar-header are stacking on mobile and I need them to remain inline.
I have tried lots of methods but they're all extremely messy and inconsistent.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li>Link</li>
...
</ul>
</div>
</nav>
CSS:
.navbar-nav {
float: none;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.nav li {
display: inline-block;
float: none;
}
Demo: http://jsfiddle.net/1u7zyehs/2/
I know the default behaviour of BS is to stack containers on mobile, is there a clean way to prevent it from happening?
In the media query targeting mobile devices, you can add the following...
Fiddle
.navbar-header{
float:left;
}
Related
I am having an issue with bootstrap navbar in terms of responsiveness.
I used data-spy="affix" on my navbar to make sure it stays fixed at the top while scrolling down and it works perfectly.
The problem however is when I resize the window to mobile dimension.
When I resize to mobile dimension the right part of my navbar will appear out of bounds. Meaning I can't see the content because my navbar is too wide for the screen. However, when I scroll down and the affix effect takes over, my navbar scales to mobile screen and the content that went out of screen will align perfectly for the mobile screen and the entire navbar will be responsive.
Here is my HTML code for navbar:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0">
<div class="navbar-header">
<div class="navbar-brand">
Title
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Page1</li>
<li>Page2</li>
<li>Blog</li>
<li>Contact</li>
<li>Shop</li>
<li><span class="glyphicon glyphicon-shopping-cart badge">5</span></li>
</ul>
</div>
</nav>
And this is my relevant CSS-code:
body {
font-size:large;
}
.glyphicon{
font-size: 95%;
}
.affix {
top:0px;
width:100%;
z-index:99999;
}
.affix + .container-fluid {
padding-top: 6.801%;
}
.navbar-header{
margin-left: 5% !important;
}
.navbar{
width:100% !important;
background-image:none;
background-color:black;
}
.navbar div a{
line-height:80px;
}
Also created a JSFiddle.
i have updated your codes in jsfiddle. can you please check now, and if you dont get that add bootstrap button to your navbar-header and i have a css code for you
#media (max-width:767px){
.navbar div a {
line-height: 20px;
}
.affix-top .collapse {
display:block !important;
}
}
I am trying to create a navigation bar that has the "brand" (LOGO) on the left side, and the actual navigation items in the center of the entire bar. I am using the default Bootstrap navbar as I just started to learn web development a week ago. This is what it looks like so far:
However, you can see the navigation items are slightly shifted to the right of the actual center of the page (The heading "This is the HOME page." is exactly centered within the page).
Here are parts of my code that I believe may be relevant:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
background-color: white;
border: none;
box-shadow: none;
}
.content {
padding-top: 65px;
width: 100%;
height: 100%;
}
.navbar .navbar-collapse {
text-align: center;
background-color: cyan;
}
.navbar .navbar-nav {
margin: 1%;
display: inline-block;
float: none;
vertical-align: center;
text-decoration: bold;
text-align: center;
}
.navbar-default {
background-color: white;
box-shadow: none;
text-align: center;
}
.navbar-header {
margin: 1%;
}
<!-- Navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" id="logo">LOGO</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am suspicious of the "navbar-brand" as it seems to interfere somehow when I try to change the text-align for ".navbar .navbar-collapse," (colored cyan just for ease of formatting) which I have set to "center" as other answers on StackOverflow have suggested.
For example, when I change the text-align to "left":
.navbar .navbar-collapse {
text-align: left;
background-color: cyan;
}
the navigation bar looks like this:
Changing the text-align to "right" pushes the navigation items all the way over to the right side of the cyan bar, as expected.
Thus, it appears that the navigation items are being centered between the "navbar-brand" and the right side of the bar rather than between the actual left and right sides of the entire bar.
Does anyone have any suggestions on how to make my navigation items accurately centered within the entire bar, so that they are in line with the heading "This is the HOME page." and not shifted to the right?
There are a few different ways to do this, and I guess it depends on what you are going to do further down the track, but the easiest thing is probably to take the .navbar-brand out of the document flow, so that the .navbar-nav ignores it when centering.
You can do this quite easily by adding something like this:
.navbar-brand {
position: absolute;
}
You can check it out over here: http://codepen.io/anon/pen/PNMBQx
Hope that helps, and good luck!
Currently my nav nav-tabs are being pushed to a next line if i make my screen smaller, however i wish to keep them on one line and enable overflow-x when they pass the 768px breakpoint.
I cannot figure out how to make this work, can anyone help?
html
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<div class="min-width" ng-if="user.loggedIn" id="char-nav" bs-scrollspy-list>
<ul class="nav nav-tabs" role="tablist">
<li>Identity</li>
<li>Attributes</li>
<li>Skills</li>
<li>Spells</li>
<li>Passives</li>
<li>Equipment</li>
<li>Consumables</li>
</ul>
</div>
</div>
</div>
</nav>
current css
#char-nav {
border: none;
margin-top: 13px;
}
.nav-tabs {
border: none;
}
.nav > li > a {
padding: 8px 15px;
}
#media screen and (max-width: 767px) {
#char-nav {
display: inline-block;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
max-width: 80%;
margin-top: 0;
}
}
Here is a bit of css :
.min-width{
overflow-x:auto
}
ul.nav{
display:inline-flex
}
And a bootply : http://www.bootply.com/BRqVaRNnZP
I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block } (that's easy), but so I need the actual ul.dropdown-menu to stretch the full width of the page. I can't seem to figure it out.
Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)
Will probably need to wrap another element too, actually, as the ul needs to be centered.
So does anyone know how to do this?
EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:
.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }
and there you have it!
First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
check the demo here http://www.bootply.com/8EgGsi4F7w
<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">
just use the position: initial in the main li(dropdown) of your nav and in the child ul dropdown-menu set width 100%
Here the alternative that worked for me.
I just tried option 2. The key is:
Adding class position-static along with (the) dropdown class, which is the parent class of dropdown-menu as follows:
<li class="nav-item dropdown position-static">
Credit to its author: VigneshKannan3 from GeeksforGeeks
It looks like this answer to a similar question has the same approach.
Check this
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
text-align: center;
left: 0;
right: 0;
}
.dropdown-menu > li {
display: table-cell;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#media screen and (max-width: 767px) {
.dropdown-menu > li {
display: block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Blackcat</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Shop</li>
<li class="dropdown">
Artist <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Rich</li>
<li>Shay</li>
<li>Jose</li>
<li>Marie</li>
<li>Simon</li>
<li>Jamie</li>
<li>Andrew</li>
<li>Teddie</li>
</ul>
</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->
<!-- container -->
<div class="container">
<div class="row">
<p>Site content here...</p>
</div>
<!-- End row -->
</div>
<!-- End container -->
I searched around and used all the solutions that worked for others - but unfortunately not for me.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Menu</li>
</ul>
</div><!-- container -->
</div><!-- navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
CSS things i've added
.navbar .nav,
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align:center;
}
have you tried this -
.navbar {
margin: 0 auto;
width: 200px;
}