I'm doing my first WordPress child theme based on the Twenty Twelve theme, and I want to move my menu up next to my header logo...
Below is an example of how it looks now, and what I want to achieve... The blue box represents the header logo, and I want my menu to appear to the right of it...
My current CSS for the menu is:
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
display: inline-block !important;
text-align: right;
color: #656565;
font-size: 0.9em;
font-family: Verdana, Geneva, sans-serif;
}
I found this SO post which is regarding the same, but when I use the proposed solution from it, my menu is suddenly way down on my site below a post...
Well, got it to work by placing the position style in #site-navigation instead of my previous code and then playing around with the values (using top instead of bottom)
#masthead hgroup {float: left;}
nav#site-navigation {float: right; width: 500px;}
You also may look into changing the tag "nav" display style in the stylesheet.css file:
nav {
display: block;
}
Try inline-block or inline.
#masthead {position: relative;}
#site-navigation {
position: absolute;
bottom: 0; /* or top, if you prefer */
right: 0;
}
Related
I recently took over a WordPress site and the sub menu wasn't appearing at all. I fixed that with a li:hover style but now the sub menu appears behind the hero area. Played around with z-index to no luck.
Here's my two styles:
.main-header .main-navigation li ul {
display: none;
position: absolute;
top: 20px;
padding-top: 0px;
text-align: left;
font-size: 1em;
}
.main-header .main-navigation li:hover ul {
display: block;
z-index: 9999999999;
}
Site in question: http://brashind.com/
How about adding overflow visible to the header, like so.
<header class="main-header" style="overflow: visible;">
I would also add background-color: white; to the sub-menu class if your going to do that, so the sub menu text is visible against the hero.
This is because, you have a overflow: hidden; for .main-header class, on this css file: wp-content/themes/brashindustries/css/modules/header.css - line 28. You can either remove that line (not recommended - as an update to theme file will remove your modifications), or override it like:
header.main-header {
overflow: visible;
}
I'm making an website with DIVI, and used custom CSS code to skew and style the menu buttons, but now i have this strange effect on drop-down submenus when they are out of the style completely.
I was trying to apply same styles for drop-down items, but nothing seems to work.
Maybe anyone ran in this problem? You can check the website live - http://steel.cody.lt and the problem is with PRODUCT menu dropdown.
Add this css and try
#top-menu-nav #top-menu li li {
margin: 0;
padding: 0 0px;
line-height: 2em!important;
width: 100%;
transform: skew(-1deg);
}
#top-menu-nav #top-menu li li a {
width: 200px;
padding: 6px 0px;
width: 100%;
}
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;
}
Hi There when I make my browser smaller than 420px (Using Chrome Stable) the Navigation elements in the first navigation line disapear, when I hover them. I cannot find the mistake.
Can anybody help? Website is: http://www.tokemedia.de
go to style.css and change display:inline to inline-block;
#navi ul li {
float: left;
margin-left: 10px;
list-style: none;
text-align: center;
display: inline-block;/* not inline*/
}
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;
}