I have an intranet page that has a large navbar that causes the sub menus to display off the screen if the user has a small monitor. My idea was to have the navbar scroll but when I use overflow in the CSS a vertical scroll bar appears when the sub menus open. I want the sub menus to display OUTSIDE of the div that contains the navbar. I'm open for all ideas including reorganizing my page if I have to.
Sample HTML is:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="scrollmenu">
<li class="menu-item dropdown dropdown-submenu">
Some Text
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<ul class="dropdown-menu scrollable-menu">
<li class="menu-item">
<a id="" class="pdf" href="#"></a>
<a id="" class="pdf" href="#"></a>
<a id="" class="pdf" href="#"></a>
<a id="" class="pdf" href="#"></a>
<a id="" class="pdf" href="#"></a>
</li>
</ul>
</li>
</li>
</div>
</div>
</div>
And the CSS I'm using is (I found this CSS on W3schools.com):
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
width: 50%;
}
div.scrollmenu a {
display: inline-block;
/*color: white;*/
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
The problem I'm having is that in order to get the scroll bar I have to use the overflow: auto setting in the CSS. But when I do that it causes the sub menus to appear in the same div which causes a vertical scroll bar to appear when a sub menu is displayed. Without the overflow setting the sub menus display outside of the div which is the desired behavior; but, of course, the scroll bars do not appear.
Help please.
FYI, I'm getting ready go home for the weekend and will followup with this on Monday.
Thanks in advance.
The scrolling nav bar is not a good design for a nav bar with sub menus. We decided to change the nav bar to an Accordion style of navigation.
Related
My navbar looks like this:
<div class="navbar-fixed" id="navigation">
<ul id="alert_type_nav_drop_down" class="dropdown-content">
</ul>
<nav>
<div class='nav-wrapper'>
<ul id='nav-mobile' class='left'>
<li><a href='/'><img src='http://vignette2.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645' height='25px'></a></li>
<li><a href='/'>Test</a></li>
<li><a href='/'>Another Test</a></li>
<li><a href='/'>Heyyy</a></li>
<li><a href='/'>Whyyy</a></li>
<li><a href='/'>Okkkkkk</a></li>
<li><a href='/'>Los Angeles</a></li>
</ul>
<a class="right black-text valign-wrapper"><img class="circle responsive-img" width=50px
src="http://www.stockvault.net/blog/wp-content/uploads/2013/11/Portrait-8.jpg"></a>
</div>
</nav>
</div>
fiddle: https://fiddle.jshell.net/g3mvhvdk/
The problem is that when the window size is too small, elements wrap around into the body of the page like so:
When it normally looks like this:
What's a good way to fix this problem? Should I make the elements horizontally scrollable?
As per suggestions in the comment, I've added the following:
<div class="navbar-fixed hide-on-med-and-down" id="navigation">
which will hide my nav bar when it resizes to be something small enough, my question is, how do I show the hamburger if the navbar's hidden? Is there a helper "show-on-med-and-down" class? I suppose the bigger question is, is there an elegant way to switch from showing a navbar to showing a hamburger and a sidebar?
.nav-wrapper {
display: flex;
align-items: center;
}
#nav-mobile {
flex: 100;
}
I have put an image on the top of my page, but I also want to insert a navigation bar on the top of the page (in front of the image). But the reality the navigation bar is above the image, I cant put them both on the same row, I can do it with make the navibar fixed top, but its really annoying when I scroll down. Is there any way to solve my problem?
(PS: Image is not a background!)
<nav class="navbar " role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
</ul>
</div>
</div>
</nav>
<img src=" ">
This should work:
.navbar {
position: absolute;
top: 0;
left: 0;
}
See: https://jsfiddle.net/tcybj6sj/
You basically had the right idea: Pin the nav bar to the top of the page. But instead of using position: fixed, which pins the nav bar to a fixed position within the browser window, use position: absolute, which pins the nav bar to a fixed position within the page.
I'm working at a justified navigation bar. Some of the menu items are in two lines some have only one line. How can I manage it, that all menu items are vertically centered?
My HTML
<nav>
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
<ul class="nav nav-justified">
<li class="active">
<a href="#" >
<span class="glyphicon glyphicon-home active"></span>
</a>
</li>
<li>
<a href="rooms_prices.html" >
Rooms & Prices
</a>
</li>
<li>
<a href="location.html" >
Location
</a>
</li>
...
<li>
<a href="specials.html">
Specials & Events
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</div>
</nav>
My LESS:
nav {
margin: 0;
padding: 0;
}
.nav-justified {
width: 100%;
hight: 60px;
> li {
float: none;
alignment-adjust: middle;
> a {
display: block;
text-align: center;
}
}
THX for your hints!
EDIT:
Sorry I've messed up the code. I've left the -Tag out because there ave mor div sections with different navigation bars for several display sizes.
You have a ton of problems here, your markup is incorrect and you're trying to apply styles to elements that don't exist.
You're targeting nav, you have no nav element so you should be using .nav to target the class you've applied the div parent.
<div role="navigation"col-lg-12 hidden-xs hidden-sm hidden-md navi">
This is not valid HTML, it should be:
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
If you have nav items where the text drops down onto two lines considering your menu is justified I'd suggest that your text is too long and you should instead use some CSS3 truncation in conjunction with storing the full name of the menu item in its title attribute so it shows on hover - stretching out your other menu items is going to look strange and will require some hacking to achieve.
.nav-justified a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The issue you will have trying to vertically center a justified nav is that usually you would make the list items display: inline-block and vertically center them that way, but as justified items they are display: block by default. Additionally Bootstrap applies the border styles directly to the anchors, not the list items, so even if you vertically centered them you'd have borders out of alignment.
I'm using a template, HTML5UP - Miniport, for my web design class - I'm just beginning to learn to code. In order to meet the specification for my class I needed to add submenus/drop-down navbar. This works fine in desktop mode, but when I decrease the size of the windows, I get some problems. The submenus stay inside the fixed navbar, pushing their way between other menus items. Here's a link to what it currently looks like:
https://jsfiddle.net/OrangeJones/9u0seLxu/
The CSS is in the fiddle link, but here's my HTML.
<div class="nav">
<ul class="container">
<li><a class="jumper home" href="#top">Home</a></li>
<li><a class="jumper about" href="#about">About</a>
<ul>
<li>Resume</li>
</ul>
</li>
<li><a class="jumper portfolio" href="#portfolio">Portfolio</a></li>
<li><a class="jumper blog" href="#blog">Blog</a>
<ul>
<li>Best of the Twin Cities</li>
</ul>
</li>
<li>
<a class="jumper contact" href="#contact">Contact</a>
</li>
</ul>
</div>
How can I get it to where the submenus drop down when hovered over or clicked on in small screens instead of taking up main navbar space.
Thank you!
Your CSS for the submenu to show and hide is inside the media query and so the dropdown elements were showing when on a screen that was smaller instead of being hidden, you also had the deceleration of the background for the submenu elements in the media query.
.nav li ul
{
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul
{
display: block;
}
.nav li ul li
{
display: block;
background-color: #282828;
}
Updated fiddle
I realize this has probably been answered before, and if so, please direct me to another page.
I have a menu bar that goes horizontally across my page. I have several links and I want spacing so the links will fill the width of the nav.
CSS:
nav {
width:100%;
float:left;
text-align:center;
}
HTML:
<nav id="menu">
<a id="home" href="index.html">Home</a>
<a id="link" href="link.html">Link</a>
<a id="another" href="really.html">Another</a>
<a id="lalala" href="stupidcode.html">Lalala</a>
<a id="oneMore" href="example.html">One More</a>
</nav>
Using display: table-cell on the elements inside nav works.
Fiddle: http://jsfiddle.net/mnmxm2h0/