I have a horizontal navigation bar in the header of my website. I'm almost done styling it, but I can't work around 1 problem.
I have, I think about 1px, spacing below the menu. (see the small green line right under 'a blog page'. I discovered it is caused by the float:left that I use on the li-items. If I remove the float, I get an unwanted spacing on the right side of every menu item
There's no padding or margin around it and I don't see any other code that could, in my opinion, cause the problem.
HTML (shortened):
<nav id="main-nav" role="navigation" aria-label="Hoofdmenu">
<ul id="primary-menu" class="menu" role="menubar" style="">
<li id="menu-item-2129" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-703 current_page_item current_page_parent menu-item-2129">a Blog page</li>
<li id="menu-item-2100" class="menu-item menu-item-has-children menu-item-2100" aria-haspopup="true" aria-expanded="false" tabindex="0"><a>Template 2</a></li>
<li id="menu-item-2126" class="menu-item menu-item-has-children menu-item-2126" aria-haspopup="true" aria-expanded="false" tabindex="0"><a>Template 3</a></li>
</ul>
</nav>
CSS:
#main-nav {
width: 100%;
display:block;
}
#primary-menu {
display: block;
text-align: left;
margin: 0;
padding: 0;
}
li {
line-height: 50px;
opacity: 1;
list-style: 0;
display: inline-block;
position: relative;
float: left;
}
a {
padding: 0 20px;
display: block;
}
Do try
* {
margin: 0;
padding: 0;
}
at the top of your css. As hans-kong posted to eliminate any default browser stylesheets
Related
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
I have a nav that I'm trying to create with flexbox. I want the to have a max height, and have the <li> push to a new column when there isn't enough space for it.
I have displayed the <ul> inline-flex. The <li> are jumping on to a new column, but the <ul> doesn't expand with the <li> - causing an overflowing effect
https://codepen.io/Woodenchops/pen/KGOYRK
ul {
background: red;
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 350px;
padding: 1rem;
}
.sub-ul {
background: none;
}
li {
list-style: none;
font-size: 46px;
}
.sub-li {
font-size: 16px;
}
.oneColumn {
width: auto;
}
.twoColumn {
width: 490px;
}
.threeColumn {
width: 980px;
}
<ul class="sub-menu topul">
<li class="menu-item">item1</li>
<li class="menu-item">item2</li>
<li class="menu-item">item3</li>
<li class="menu-item">item4</li>
<li class="menu-item">item5</li>
<li class="menu-item">
<ul class="sub-menu sub-ul">
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
</ul>
</li>
<li class="menu-item">item4</li>
<li class="menu-item">
<ul class="sub-menu sub-ul">
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
</ul>
</li>
</ul>
I think you need to consider first: is my UL a row that wraps columns or is it a column that wraps rows?? In your case I think the first is true.
What I did was remove flex-direction (we just want the default), all the size restriction classes and the javascript manipulating them.
Because you want a max-height: 350px we need to keep that value. However, you need to deal with the the main ul overflowing, so add (at least) overflow-y: auto, otherwise you will get unexpected overflow issues with other elements in your HTML document.
Finally add some minimal width for your columns as flex-basis to you 'li' elements instead of the javascript.
The below code wraps and overflows just as expected, moreover it is completely under your control.
All that's left is making it look good...
Cheers!
/* javascript removed */
/* debugging, so it's visible what's happening */
*::before,::after,* { outline: 1px dashed }
ul {
background: red;
display: inline-flex;
flex-wrap: wrap;
max-height: 350px;
overflow-x: hidden /* or whatever */;
overflow-y: auto;
padding: 1rem;
justify-content: flex-start;
align-items: flex-start;
}
li {
flex: 1 1; /* allow shrink and grow */
flex-basis: 150px; /* (or some) minimal required column width, will trigger flex overflow */
}
.sub-ul {
background: none;
}
li {
list-style: none;
font-size: 46px;
}
.sub-li {
font-size: 16px;
}
<ul class="sub-menu topul">
<li class="menu-item">item1</li>
<li class="menu-item">item2</li>
<li class="menu-item">item3</li>
<li class="menu-item">item4</li>
<li class="menu-item">item5</li>
<li class="menu-item">
<ul class="sub-menu sub-ul">
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
</ul>
</li>
<li class="menu-item">item6</li>
<li class="menu-item">
<ul class="sub-menu sub-ul">
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
<li class="menu-item sub-li">
sub menu item
</li>
</ul>
</li>
</ul>
Here is a jsfiddle:
https://jsfiddle.net/ny7f18y9/
<header class="site-header">
<div class="title-area">
<p class="site-title" itemprop="headline">Home</p>
</div>
<div class="widget-area header-widget-area">
<section id="nav_menu-30" class="widget widget_nav_menu">
<div class="widget-wrap">
<nav class="nav-header">
<ul id="menu-top-menu">
<li id="menu-item-1210" class="menu-item">
<span itemprop="name">Locations & Hours</span>
</li>
<li id="menu-item-1212" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1212">
<a target="_blank" href="#" itemprop="url"><span itemprop="name">My Account</span></a>
</li>
<li id="menu-item-8693" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8693">
<span itemprop="name">Catalog</span>
</li>
<li id="menu-item-9150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9150">
<span itemprop="name">How Do I…</span>
</li>
<li id="menu-item-2348" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2348">
<span itemprop="name">Contact Us</span>
</li>
</ul>
</nav>
</div>
</section>
</div>
</header>
CSS:
.menu-item {
display: inline-block;
}
.site-title, .site-title a, .title-area {
width: 260px;
}
.site-header {
background: rgba(0, 0, 0, 0) url("http://placehold.it/260x89") no-repeat scroll 0 0 !important;
}
.site-title, .site-title a, .title-area {
float: left;
height: 89px;
overflow: hidden;
text-indent: -5000px;
}
.site-header {
min-height: 90px;
overflow: hidden;
}
#menu-top-menu {
float:right;
}
I have a nav area that floats to the right of a logo, which is all the way left. The ul tag inside the nav area has {float:right} as a part of its CSS. I would like to see the li elements stay in a horizontal line, but make a line break when the width of the ul is too wide for the space between the image and the right edge of the parent element.
The below image is what I would like (although the links are reversed which is not what I want - I only need the ul to make a line break when the width is too narrow):
I would like the nav area to stay floated to the right of the logo, and break lines when necessary. Right now it maintains an inline-block line, and goes to a new line (below the image) when it doesn't have enough room to fit to the right of the logo.
I've researched many questions here at Stack Overflow, but most people want the opposite - to not break lines; they are floating their li tags to the right. I wish I could do that, but then the li tags show in reverse order. Otherwise I can't find on Google or here the true answer that I need.
This issue is evident when I reduce the browser's width, and so it causes a problem with responsiveness. I prefer not to have to reverse the order of my li tags - that seems like poor practice.
[1]: https://jsfiddle.net/ny7f18y9/
You don't want the ul to float right, you want it to text-align right.
So that's all you need to change.
.menu-item {
display: inline-block;
}
.site-title, .site-title a, .title-area {
width: 260px;
}
.site-header {
background: rgba(0, 0, 0, 0) url("http://placehold.it/260x89") no-repeat scroll 0 0 !important;
}
.site-title, .site-title a, .title-area {
float: left;
height: 89px;
overflow: hidden;
text-indent: -5000px;
}
.site-header {
min-height: 90px;
overflow: hidden;
}
#menu-top-menu {
text-align:right; /* this */
}
<header class="site-header">
<div class="title-area">
<p class="site-title" itemprop="headline">Home</p>
</div>
<div class="widget-area header-widget-area">
<section id="nav_menu-30" class="widget widget_nav_menu">
<div class="widget-wrap">
<nav class="nav-header">
<ul id="menu-top-menu">
<li id="menu-item-1210" class="menu-item">
<span itemprop="name">Locations & Hours</span>
</li>
<li id="menu-item-1212" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1212">
<a target="_blank" href="#" itemprop="url"><span itemprop="name">My Account</span></a>
</li>
<li id="menu-item-8693" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8693">
<span itemprop="name">Catalog</span>
</li>
<li id="menu-item-9150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9150">
<span itemprop="name">How Do I…</span>
</li>
<li id="menu-item-2348" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2348">
<span itemprop="name">Contact Us</span>
</li>
</ul>
</nav>
</div>
</section>
</div>
</header>
For this sort of layout, a float is too sophisticated and unnecessary.
You can position the <header> relatively and the <nav> inside it absolutely:
header {
position: relative;
}
.nav-header {
position: absolute;
top: 0;
right: 0;
}
I have created a mobile menu.
Now I need to create a submenu in that menu.
There are two problems that occur while clicking the link to open the submenu.
The submenu opens behind the 1st level menu and should push the first level down.
If I "click" (how do you call it on a phone?) the link that opens a submenu it directly goes to the page, obvious but I have created menus that are mouse over for desktop and on a mobile device I was able to click the menu item twice so I could open the submenu.
Here is the HTML output!
<div class="menu-head-menu-container open">
<ul id="menu-head-menu" class="menu">
<li id="menu-item-30" class="menu-item menu-item-has-children">
<ul class="sub-menu">
<li id="menu-item-47" class="menu-item menu-item-47">
<li id="menu-item-50" class="menu-item menu-item-50">
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-29">
</ul>
</div>
Here is the CSS for the submenu.
menu-head-menu-container > ul > li > ul {
display:block;
list-style: none;
padding: 0;
margin: 0;
text-align: left;
margin: 10px 0 0 -10px;
background-color: #FFFFFF;
}
This is the css from the 1st level menu items:
.menu-head-menu-container > ul > li {
display: block;
height: 40px;
background: #006185;
width: 100%;
margin: 0;
padding: 6px 0 0 0;
border-bottom: 1px solid #FFF;
}
I don't really see why the subpage won't be visible.
M.
if i correctly understand, you can use something like this :
<div class="menu-head-menu-container open">
<ul id="menu-head-menu" class="menu">
<li id="menu-item-30" class="menu-item menu-item-has-children">click
<ul class="sub-menu">
<li id="menu-item-47" class="menu-item menu-item-47">123</li>
<li id="menu-item-50" class="menu-item menu-item-50">123</li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-29">123</li>
</ul>
</div>
$("#menu-head-menu li").click(function(){
$(this).find("ul").slideToggle();
});
#menu-head-menu ul{
display: none;
}
jsfiddle
I am working on a site at:
Development
and I want to make the sub-menu background stretch across the entire width of the menu, left to right, without changing where the text appears.
Here is some relevant code from the menu:
<li id="menu-item-11214" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11106 current_page_item menu-item-has-children menu-item-11214 fusion-dropdown-menu" >Expertise <span class="caret"></span>
<ul class="sub-menu">
<li id="menu-item-11248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11248 fusion-dropdown-submenu" >Overview</li>
<li id="menu-item-11215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11215 fusion-dropdown-submenu" >Families & Individuals
<ul class="sub-menu">
<li id="menu-item-11275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11275" >Tax & Advisory</li>
<li id="menu-item-11277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11277" >Trust & Estates</li>
</ul>
</li>
I have tried a few things and I get weird results. The background will begin where the text is and stretch out the number of pixels I assign, but each new parent menu shifts the sub-menu to the right. What I want is the menu to look like:
Production
Use psuedo elements to stretch the full width.
Something like...
ul li ul {
position: relative;
}
ul li ul:before,
ul li ul:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 999999px;
background-color: #fff;
}
ul li ul:before {
right: 100%;
}
ul li ul:after{
left: 100%;
}
I've added a working example below using a single div.
.full-width-please {
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
background: green;
}
.full-width-please:before,
.full-width-please:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 999999px;
background-color: blue;
}
.full-width-please:before {
right: 100%;
}
.full-width-please:after {
left: 100%;
}
<div class="full-width-please"></div>
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex