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.
Related
I am working on my wife's business site at invisionbilling.com and I am having difficulties vertically aligning the email address and the social icons in the header. I would like to align the email address vertically in the center of the header bar. This would also make it align with the social icons. I have been inspecting the elements and looking at the CSS but can't seem to make the right adjustment. Below is the CSS I believe that is affecting it. Can anyone help me fix this? Thanks!
div#header-widget-area {
float: right;
padding-left: 25px;
}
header .header_top .header_link {
list-style: none;
text-align: right;
margin: 0;
}
header .header_top .header_link li {
display: inline-block;
margin-left: 10px;
position: relative;
}
Looks like you've got a case of the clearfix.
Just add the "clearfix" class to your "header_link" element, then your CSS for the email li tag:
header .header_top .header_link li {
display: inline-block;
margin: 9px 5px;
position: relative;
}
That should fix it up! Read more about clearfix here: What is a clearfix?
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.
I am using this template on my website: http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle: http://jsfiddle.net/uPw85/
What I need help with:
1) Center the menu on the page, as you can see on the link it's left aligned.
2) Still keep the text in the drop down menus aligned to the left (just as in the link above).
I've searched this page and on Google a lot before asking for help and none of the results have worked for me. I've tried just about every tip I've found but the menu still won't be centered for me, the only thing that happens is that the text in the drop down menu is centered but I want to keep it to the left.
I've tried with multiple variations of these in different places (nav, menu, li, ul) in the CSS but with no luck:
display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;
EDIT 2/10, 1 PM EST: I appreciate you guys trying to help but so far none of the answers you've given has helped.
Try this:
ul.sf-menu {
text-align: center;
}
ul.sf-menu li {
display: inline-block;
}
ul.sf-menu li a {
display: block;
}
ul.sf-menu ul {
text-align: left;
}
EDIT:
I've edited the JSfiddle: http://jsfiddle.net/uPw85/3/
EDIT 2:
Remove float: left in ul#nav, or just remove the id="nav" in the ul-tag in the html
In order to center the menu you need to set the width of the child div to be smaller than a set width of a parent. Additionally need to remove the float of the menu as floating an element effectively takes it out of the parent div.
Try setting the following:
ul.sf-menu {
float: none;
width: 760px;
margin: 0 auto;
}
Works when inspecting element. Another alternative would be to try the following code.
ul.sf-menu {
float: none;
display: table;
margin: 0 auto;
}
Just add:
ul#nav {
float:left;
padding-left: 80px;
}
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 have a vertical CSS sprite menu.
I would like to realize a (at example) 3 pixel space between each of the vertical buttons.
Is it possible to create this spaces with CSS?
or is the only option to resize the Sprite with all buttons and set all positions new in the CSS file?
Yes, it's simple to use but the main problem with your markup. write like this:
ul#menu {
clear: both;
float: right;
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu li {
margin-bottom: 3px;
margin-right: 10px;
overflow: hidden;
text-indent: -9999px;
}
& remove <br> from your html
Yes it's possible.
Assuming that each button uses the background independently of the other buttons, you can simply put a margin on each one:
for example:
#menu li{
background: url(../urlToSprite) /* set positions elsewhere */
margin-bottom:3px;
}