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
Related
I'm trying to implement a UI where the navigation bar on the LHS is fixed and the content window is responsive. The following is my implementation:
<div style="width: 15%; float: left; display: inline;>
<nav class="navbar navbar-inverse navbar-left" style="">
NAVIGATION CONTENT HERE (FIXED)
</nav>
</div>
<div style="width: 85%; float: right; display: inline;">
DESIRED RESPONSIVE CONTENT HERE
</div>
how can this be achieved?
I tried using bootstrap classes by adding a container on the top and adding column classes to both the div's. The div on the right overlaps the navbar div when the browser window size is reduced.
Are you sure you want to implement such a design? Left-sidebar with fixed width and the content with variable width? It would be much easier and faster to just use bootstrap table grid system. Not to mention that it would automatically work on all devices and resolution, whereas your design would only make sense on some particular resolutions.
used the following way to fix my side navbar:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed
fixed the navbar with 15% width.
added bootstrap classes to the content on the RHS.
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!
I have a simple bootstrap navigation, and a main content area.
Problem: whenever a content exceeds the page height, so that the scrollbar on the right appears, the whole page including the menu is shifted accordingly to the left.
This causes flickers as some pages only contain short texts without scollbar, and some do.
Question: how can I fore the content to remain aligned, even if the browser scrollbar is shown?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
</nav>
<div class="content">
</div>
Make sure you just give:
body {
overflow-y: scroll;
}
Most of the times, you don't need overflow-x, which is the horizontal scrollbar. For backwards compatibility, use the following:
body {
overflow: scroll;
overflow-x: hidden;
}
The usual way to stop the 'jump' in page content is to force a vertical scroll bar, even when there is nothing to scroll.
body {
overflow: scroll;
}
This is my preferred method, as different browsers have different scrollbar widths, and there is no sure-fire way to tell if a scrollbar has been added.
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
There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.
By default it works fine because of some trick which I don't know.
Image ovelaps the navbar but links in navbar are still working in the area where image is transparent
However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image.
My html is the following:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li>Button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
CSS is the following
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can find it here with the picture (base64)
http://jsfiddle.net/5qYK8/9/
When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all.
You can find it here
http://jsfiddle.net/5qYK8/8/
Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button?
Can someone at least explain why Button is working in first case when image does overlap it?
Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it
You will need to create another <div> container, then place <a> link around a <div>, like this:
<div id="toplayer">
<a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>
You will also have to duplicate the selector ID below and rename it to something like this example.
#nav1.affix {
position: fixed;
top: 0;
z-index: 0;
}
Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.
#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}
Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.