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/
Related
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.
I am doing a drop down menu and i want the drop down items to all be in a line and probably drops to the next line on screen resolution. my html is
HTML
<li class="main"> Menu
<ul>
<li class="sub-menu"><a href="#">
<div class="content" style="width:300px;">
<img src="image.jpg"><p>text</p>
</div></a>
</li>
<li class="sub-menu"><a href="#">
<div class="content">
<img src="image.jpg"><p>text</p>
</div></a>
</li>
</ul>
</li>
CSS
.main {float:left; display:inline-block; width:auto}
.sub-menu{float:left; width:300px;}
.content{width:100%}
What I am targeting is when someone clicks the main menu "menu" it drops down to the sub menu "sub-menu" and all sub menus come in line until screen width changes and the last one automatically goes to a next line. Any help will be much appreciated people!!!
Thanks in advance.
Michelle
Your question is a little hard to understand, but from what I'm guessing, you want to click the main menu, and a sub menu drops down, displaying the contents (img with text).
This might be what you're looking for:
<style>
.main {background-color: red;}
.sub-menu {background-color: blue;}
.sub-menu a {display: inline-block; color: white;}
</style>
<div class="main">
Menu
</div>
<div class="sub-menu">
<img src="image.jpg"> text
<img src="image.jpg"> text
</div>
Where you can make the sub-menu hidden until you click the main menu. You might also want to add some padding to the links for spacing. Colors are there so you can see the layout.
<p> elements automatically drop a line in web display, making them display below the img tags.
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'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.
Imagine I have a navigation bar in my page header, with a number of links. I'd like the links to spread out horizontally to fill the parent ; is there a way to do this using CSS which doesn't rely on me hard-coding based on the number of links? e.g if I add or remove a link I'd like it to still work.
I tried:
<div class="navBar">
<a class="navBtn" href="#" >Home</a>
<a class="navBtn" href="#" >Services</a>
<a class="navBtn" href="#" >About us</a>
<a class="navBtn" href="#" >Blog</a>
<a class="navBtn" href="#" >Contact</a>
</div>
div.navBar
{
text-align:justify;
}
a.navBtn
{
font-style:italic;
}
But this just left-aligns the text. I know I could use a table but just to show I can, I'm trying to do it 'properly'. Or, is this a case where a table is 'proper'?
Text-align: justified;
Another option is to create a table with width: 100% around your nav bar and have each nav item be in a td
you could even set the width, in percentage, of each td