Bootstrap newbie here. I've only today started using Bootstrap to develop a website with, but something's going on that I can't figure out. I am using the following code to create my navigation:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav uppercase bold">
<li>Projecten</li>
<li>Over</li>
<li>Contact</li>
</ul>
<a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a>
</div>
</div>
The idea is that there's a set of links aligned to the left, and a logo is displayed aligned to the right. Now I have noticed that this works fine as long as the browser window size is larger than 768px (where the bootstrap css still assigns a width to .container) but when the window becomes smaller (and the .container class no longer has a width, I believe), the links on aligned to the left of the navbar start stacking vertically, instead of horizontally.
The uppercase and bold classes in the ul are included in my custom css, to style the links.
If I were to guess, it has something to do with the "block" alignment or perhaps the .container becoming too small to fit the links horizontally, but I am unable to figure this out, and could not find a similar problem on the web.
I figure this is probably something very simple and makes me look stupid, but I hope you can help. Thank you.
You can add CSS like this to prevent it from stacking..
.navbar-nav {
min-width:360px;
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
http://www.bootply.com/114462
Related
I have two DIVs in a nav bar stacked on top of each other inside container elements so they can slide up and down and have only one row visible at a time. Below is the markup and styles, stripped down to the relevant bits. I'm using Twitter Bootstrap 3 as well.
#searchrap {
height: 38px;
overflow: hidden;
position: relative;
}
#searchrap .slider {
position: absolute;
height: 76px;
}
<nav class="navbar navbar-default navbar-fixed-top" id="miscnav">
<div class="container-fluid">
<div class="navlinks">
<ul class="nav navbar-nav">...</ul>
<div id="searchrap">
<div class="slider">
<div class="links">
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<div class="search">
<form class="form-search" id="siteSearch" action="search" method="get">...</form>
</div>
</div>
</div>
</div>
</div>
</nav>
For some reason, when the page loads, the .slider DIV is positioned ~35px too high. I've tried setting "top:0" but it makes no difference. In Chrome dev tools I can uncheck "position:relative" on the #searchrap DIV in the inspector and that causes the .slider DIV to fall into the right position. Then I can check it again and everything is fine--it doesn't go back up. I can fix the alignment issue by setting "top:35px" but then if I uncheck and recheck "position:relative" it makes it 35px too low and I need to reset "top" to 0. I don't like this solution anyway because I don't understand why 0 isn't the top of the viewport.
You can see it in action here: https://www.tntech.edu/dev/ttu15.interior
The search field, which is on the bottom, starts out visible with the nav links above the viewport. It should start out with the nav links visible and the search field below them. What gives?
Thanks in advance!
This will be an easy question for most of you no doubt. I am trying to make a web page for my friend using this theme:
http://www.templatemo.com/live/templatemo_452_stone
I'm trying to move the header "STONE" more to the left, any ideas on how to do this?.. Also if possible I'd like the front-page image to be slightly higher up than it is.
Thanks in advance, I've got a headache from all the messing with it!
Looks like your .container class has a set width of 1177px. If you only want the header to move and not the links as well, then you'll have to add some negative margin.
.navbar-header {
margin-left: -50px;
}
Change your class container to container-fluid as below.
<div class="site-header">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
The final output would be as below.
The difference between container and container-fluid as stated in the answer here is
.container-fluid continuously resizes as you change the width of your
window/browser by any amount, leaving no extra empty space on the
sides ever, unlike how .container does. (Hence the naming: "fluid" as
opposed to "digital", "discrete", "chunked", or "quantized").
You have to set this css rule to achive it:
div.row {
margin-left: -100px !important;
}
But as I don't know about your html/css structure it may have side effects...
You can also search in the html for the line:
<div class="row">
and put the style inlined:
<div class="row" style="margin-left: -100px">
Of course change -100px for the number of pixels you want. In the original css it's set to -15px;
I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP
I am stumped. I am using Bootstrap 3 static nav bar with a logo. I don't like how the responsive image works, so I would just like to calculate the size of the logo (image) to be 100% - 200px (width of hamburger toggle). I'm doing this so that the logo and hamburger can stay on the same "line" and don't increase the height of the navbar.
Here is my code snippet.
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsable-nav">
Menu <i class="fa fa-2x fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png"/>
</a>
</div>
....
</div>
In my CSS, if I add
.navbar-brand img{
width:calc(100% - 200px);
height: auto;
}
and then using Chrome Developer Tools, I see extra margin on the right.
But there is no extra (right) margin defined in the css.
Now, if i manually change the width in chrome dev tools to the calculated width (in this example it is 310px) -- then it works correctly.
It seems like when I am using the calculated width, it adds a right margin, which causes the logo and hamburger to break to different lines. I have reviewed my CSS in Chrome Dev Tools and diff'd the two examples -- but can't find differences.
Any guidance as to WHY this is happening and how to fix it would be appreciated. Let me know if you need more code snippets.
Please try to use float option.
i.e:
Use "pull-left" class in "navbar-brand" and specify the width
.navbar-brand {
width: calc(100% - 20px);
}
.navbar-brand img{
width: 100%;
height: auto
}
This may help you.
You should try wrapping the entire nav element in "container-fluid" as the javascript for bootstrap, and the styles within bootstrap are likely stepping in between your nav elements, and adding "container-fluid" or (full size responsive container" to JUST your nav-header elements.
So begin by changing:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
To:
<div class="container-fluid"> <!--Move this around entire nav element oor eliminate entirely-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
It is not an actual margin. When block elements does not extend to full width, dev tools shows the excess space as margin to show the layout.
In your case, please check if any value for display is inherited for this element.
Adding float will remove this highlight.
The problem was with the width of the navbar-brand element. I changed the width of that to
width:calc(100% - 200px);
and then set the width of the logo to
width: calc(100% - 10px);
and that gave me the desired effect and I don't have the navbar-brand logo with a line break.
use the below code to solve the above div width problem. if it is displaying different in different browser then write for Moz -moz-box-sizing:border-box,
Webkit -webkit-box-sizing:border-box;
box-sizing:border-box;
I'm trying to do a simple thing: a top bar (like a fixed navbar) that has a brand name on the left and 2 icons on the right. I'm developping for mobile, so I don't want it to change (collapse, like a navbar does by default) for small screens.
I'm relatively new to Bootstrap, so I guess I'm doing something wrong.
In order to prevent the collapse, I put everything in the navbar-header div. I created a <span class="pull-right"> to get the icons to the right, but I can't get them to render correctly.
(I doubt if this matters, but I'm using Bootstrap 3.0.x.)
This is what I currently have: http://jsfiddle.net/rd73tecL/2/
Try using the following CSS to disable the collapsing effect (as referenced here: Bootstrap 3 - disable navbar collapse):
.navbar-collapse.collapse {
display: block !important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
I'm unsure as to what you mean by 2 icons on the right: to the immediate right of the logo or right of the navbar? If the latter case, you could put your nav bar links into a div and add the pull-right class to put it to the right of the navbar. You would then also need to add display: inline-block !important; to the css of your navbar logo, as shown in this JSfiddle
Hope that helps.
Try using this code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fibe</a>
<span class="navbar-right pull-right">
<ul class="navbar-nav nav">
<li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
<li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
</ul>
</span>
</div>
</div>
</nav>
Just amended
<span class="navbar-right"> with <span class="navbar-right pull-right">
Hope this helps.