I am trying to customize navigation menu in wordpress. I want my submenu to appear below the parent menu element in a single line. I am also setting submenu position to absolute so that I can control the overlap of main menu bar and submenu bar.
Below is my minimized CSS (in SASS, for clarity I am posting only those portions that i thought relevant).
Problem: Everything is working fine except the submenu items now break into lines, rather than in a single line.
Observation: If I remove absolute positioning OR I give a fixed width, then it works.
What I tried: Putting white-space: nowrap and display:inline-block (in li), though I know display doesn't make sense for absolute positioning.
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
&>li {
float:left;
}
}
}
}
}
You have to specify a width to the submenu in order to get it working: JSFiddle
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
width: 500px;
&>li {
float:left;
}
}
}
}
}
If you use position: absolute; without a width or without specify left and right, the element will use the width as small as possible.
Related
I have the following:
ol.progress-tracker {
margin: 0;
padding: 0;
list-style-type: none;
/*
position: absolute;
bottom: 0px;
*/
}
If I try the commented code, it messes up my other styling and I'm not sure why. Is there another way to push this thing to the bottom in a responsive-design-friendly way? My fiddle is here:
http://jsfiddle.net/4mABB/
If you position a block element absolutely, it looses it's default property of using the whole space horizontally. You would have to specify a width yourself:
ol.progress-tracker { width: 300px; /* or whatever */ }
I need to make a vertical menu using CSS and <ul> <li> tags. But when ever I put the cursor on a link that contains submenu, other main items move to another place.
This is my jsfiddle.
Can anybody help me ?
Instead of making the sub menu position: relative (which still makes it part of the flow) make the containing li position: relative and the menu_sub position: absolute with the appropriate left/right/top/bottom settings:
#menu li {
position: relative;
}
#menu_sub {
margin:0;
padding:0;
position: absolute;
list-style:none;
display:none;
left: 70%;
top: 0;
}
http://jsfiddle.net/Kc6m4/3/
Explosion Pills response works. As does this:
By floating the sub menu, you can also break it you of the normal flow, but still retain it's relationship to the parent UL:
http://jsfiddle.net/Kc6m4/4/
#menu li:hover ul {
display: block;
float: right;
clear: none;
position: absolute;
top: -30px;
left; 0;
}
Then you adjust the position using top, left, right, etc. In my example above, I used a negative top position to clear the height of the parent list item so they start at roughly the same position.
I want to give a list item a background-color, border etc. I have the following CSS and HTML. I will also use that div to add more absolute positioned elements relative to the li > div.
ul {
list-style-image: url('../img/nr_cross.png');
}
li {
position: relative;
height: 35px;
}
div {
position: absolute;
z-index:-1;
left:-40px;
background-color: #dfdfc9;
}
<ul>
<li><p>This</p></li>
<li><p>That</p></li>
<li><p>Other</p></li>
<ul>
The problem is, i cant set the z-index for the list item. If i set the absolute position for the list item, it defeats the purpose of using the list items for layout. I'm thinking this is impossible, or maybe there is a better way to do what I want.
Update:
Update 2:
Answer below does not work in firefox 10, ie8, ie7. Also fixed question above.
Okay, that mockup clears things up. I think. Does this work for you?
ul {
list-style-image: url(http://cdn1.iconfinder.com/data/icons/splashyIcons/breadcrumb_separator_arrow_full.png);
background-color: #dfdfc9;
margin: 0;
padding: 0;
}
p {
position: relative;
left: 2em;
}
li {
border-bottom: 2px dotted black;
border-top: 1px solid transparent;
}
Example here: http://jsfiddle.net/dbT2n/1/
Im using the whiteboard theme for wordpress.
My navigation is aligned to the right hand side of my header, however the navigation text is overlapping, the two inks in the navigation overlap each other on the header. any idea why?
#nav-primary {
clear: both;
width: 100%;
padding: 0 10px;
}
#nav-primary ul,
#nav-primary li {
list-style: none;
}
#nav-primary a {
position: absolute;
right: 0;
padding: 10px;
width: auto;
/*bottom: auto;*/
}
try using z-index:99; or create a relative div id if you are using position absolute.
It seems that position: absolute is doing you no favours here. Try removing this.
You also might be inheriting undesirable styles from your basic list style, but without seeing the whole CSS file we won't be able to determine that.
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.