I am using the theme twenty twelve for wordpress http://wordpress.org/extend/themes/twentytwelve and have changed the menu so that it looks good for the desktop. In the mobile version, the button for the menu shows up but when you click it appears my regular menu. I would like to style down the mobile menu without my normal menu is affected but can not find where to do it. My site is not online, so I can not give a link to my site
twenty twelve demo http://twentytwelvedemo.wordpress.com/
This is my destop menu that looks ok.
This is the mobile menu that I want to style without affect the desktop menu
Have changed the following css to style my desktop menu
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 2px solid #f68a1f;
border-top: none;
margin: 0 0 2px 0;
padding: 0px;
padding-top: 50px;
width: 550px;
}
.main-navigation ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li a,
.main-navigation li {
list-style: none;
float: left;
width: 90px;
margin:0px;
}
.main-navigation li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 1rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #ffffff;
background-color: #f68a1f;
}
The entire css file from theme http://pastebin.com/SFaT4BCn
Do you use media queries? Try to use media queries to set styles for specific device resolutions.
Found /* =Media queries /* Minimum width of 600 pixels. */ in CSS and the theme use mobile first. Just moved my code to that section.
Related
IS it possible to align menu item center? Actually my website has a lot many menus, So menus are appearing on second line from left so I want to show them as center aligned.Any suggestions?
Please find below my Css. This is edited style sheet of default twenty ten wordpress theme. I am using full width layout.
Thanks.
#access {
background:#cc0000;
margin: 0 auto;
width: 100%;
padding: 0px 0px;
border-top:2px solid #eb9999;
border-bottom:12px solid #000000;
clear:both;
margin-bottom:5px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin: 0 auto;
width: 1024px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 20px;
padding: 0 10px;
text-decoration: none;
}
#access ul{display:inline-block;}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
I created a drop down menu and added it to blogger. It is not working in Chrome or Safari. The problem is, the drop down menu appears when first rolled over, but disappears after the first sub menu item. This is not happening in Firefox or IE, only a problem in Safari and Chrome. Could it be a z-index issue? Any help is appreciated. I am adding the code below:
#navigation {
font-family: verdana;
font-size: 18px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style-type: none;
}
#navigation li {
position: relative;
float: left;
margin: 0px 0px 0px 0px;
z-index: 30;
}
#navigation li a {
display: block;
padding: 8px 13px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-right: 0px;
background: #00ddf5;
color: #ffffff;
text-decoration: none;
}
#navigation li ul {
position: absolute;
left: -89px;
top: 0px;
display: none;
padding: 0px;
margin: -11px;
list-style-type: none;
z-index: 20
}
#navigation li.over ul li {
float: none;
margin: 0px!important;
top: 10px;
}
#navigation li.over a {
background: #a7f6ff;
}
#navigation li.over ul {
padding: 0px!important;
display: block;
background: #00ddf5;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-left-right: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-bottom-top-right: 0px;
}
#navigation li.over ul li a {
font-size: 18px;
padding: 0px 30px;
background: none;
white-space: nowrap;
}
#navigation li.over ul li a:hover {
background: #000000;
color: #ffffff;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
I want to the Li Element of the Ul of my menu are in the Center, I tried a lot of methods but it is not going on. Take a look on my css:
#menu {
float: left;
width: 767px;
height: 38px;
margin: 11px 0 0 14px;
background: url(images/menubg.gif) repeat-x;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border: 1px solid #efeff1;
}
#menu ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
height: 40px;
}
#menu ul li {
float: left;
color: #767676;
height: 18px;
padding: 11px 0px 11px 0px;
display: inline;
}
#menu ul li a {
font-family: Arial, Helvetica, sans-serif;
color: inherit;
font-size: 12px;
text-decoration: none;
font-weight: bold;
display: block;
padding: 0px 23px 2px 23px;
border-left: 1px solid #e0e0e2;
}
I tried display: inline, text-aling: center, but it doesnt get right.
Thanks a lot in Advance.
I removed the float and added inline-block instead:
http://jsfiddle.net/dtTdg/1/
#menu ul li {
display: inline-block;
If you look here under "About ISL" -> "Board of Trustees" you can see I have created a third level dropdown, but how can I properly align that drop down? Below you will see my css.
#menudiv {
width: 999px;
float: left;
clear: left;
height: 250px;
background: url(images/top_bg.png) no-repeat;
margin-top: 10px;
}
#mainmenu {
width: 948px;
height: 63px;
float: left;
margin-left: 16px;
margin-top: 5px;
border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
background: url(images/nav_bg.gif) repeat;
}
.mainnav {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav ul {
position: absolute;
top: -999em;
display: none;
}
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 63px;
line-height: 55px;
margin-right: 0px;
border-right: 1px solid #D5D5D5;
}
.mainnav li.last {
border-right: none;
}
.mainnav a {
display: block;
font-size: 19px;
margin: 0;
color: #cc9900;
font-family: Copperplate,Arial,Helvetica,Sans serif;
font-weight: 600;
text-decoration: none;
padding: 3px 13px 3px 12px;
color: #555;
text-shadow: 0 1px 1px white;
}
.mainnav li:hover {
text-decoration: none;
border-bottom: solid 0px #ccc;
background: white;
}
.mainnav ul li {
width: 132px;
}
.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: 0px;
top: 50px;
padding-top: 0px;
width: 132px;
border-bottom: solid 0px #eaeaea;
background: url(images/nav_dropdown_shadow.gif) repeat-x top;
padding: 6px 0 0px 0px;
margin: 13px 0 0 -1px;
border: 1px solid #D5D5D5;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
width: 175px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
}
.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}
.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 132px;
top: -8px;
}
.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}
.mainnav li li {
color: #555;
display: block;
padding: 0px;
height: auto !important;
border: none;
width: 175px;
background: url(images/nav_dropdown_bg.gif) repeat;
margin: 0;
}
.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
height: auto !important;
line-height: 30px;
color: #333;
font-weight: normal;
font-family: arial,helvetica,sans-serif;
font-size: 12px;
border: none;
margin: 0;
padding-left: 10px;
overflow: hidden;
border-bottom: 1px solid #E3E3E3;
}
.mainnav li li :hover {
}
.mainnav li li a:hover {
background: none;
color: #555 ;
border-bottom: 1px solid #E3E3E3;
}
The problem is that the ul.sub-menu li ul.sub-menu is too far to the left and is covered by its parent. How can I fix the right alignment of these ul elements?
On line 211 in your mainmenu.css, adjust the left position of your submenu by something like 178px, that should place the submenu somewhere more comfortable.
I have this website: http://dev.gratefulhearttherapy.org/
with a dropdown menu, it's supposed to unfold when you hover a category like "Our Services" or "Abous Us". But it doesn't.
I know it's a CSS issue because I use 2 different stylesheets, and one works while the other doesn't. However I've spent two hours on it and I don't find what's wrong.
I tried to play with z-index but it doesn't work. I took over someone else's work and CSS file is messy, and the website calls several stylesheets. In any case, the stylesheet I'm working with is here: http://dev.gratefulhearttherapy.org/index.php/tools/css/themes/gratefulheart/typography-new2.css
The relevant part of the CSS begins line 287, the "Mega Menu" section. Here it is:
Can anyone give me a tip at what might be the issue?
/* Mega Menu */
.top-level-nav a.nav-path-selected {
color: #EA5603 !important;
ul.mega-menu {
height: 44px;
width: 96%;
text-align: left;
margin: 10px 0 0 20px;
padding: 0 60px;
text-indent: 0;
list-style-type: none;
margin-left: -1px;
}
ul li.mega-menu {
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
line-height: 44px;
}
ul li a.mega-menu {
text-decoration: none;
color: #DE573C;
font-size: 138.5%;
}
.nav li a:hover {
color: #8e4c0f;
}
.custom {line-height: 1.6;}
.custom ul.mega-menu, .custom ul.mega-menu, .custom ul.mega-menu li {margin: 0; padding: 0; border: none;}
.custom ul.mega-menu {
background: #D6CEB4;
width: 100%;
height: 44px;
border-top: solid 2px #CCC2A5;
border-bottom: solid 2px #CCC2A5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;; position: relative;
}
.custom ul.mega-menu li {float: left; margin: 0; padding: 0; }
.custom ul.mega-menu li a {float: left; display: block; padding: 12px 38px 12px 25px; ; text-decoration: none; color: #3B3B3B; font-size: 138.5%; text-decoration: none;}
.custom ul.mega-menu li a.dc-mega {position: relative;}
.custom ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 18px; right: 15px; width: 8px; height: 6px; background: url(images/arrow.png) no-repeat 0 0;}
.custom ul.mega-menu li.mega-hover a, .custom ul.mega-menu li a:hover {background-position: 100% -40px; color: #8e4c0f;}
.custom ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;}
.custom ul.mega-menu li .sub-container { /* block container of dropdown submenu when it's closed (I think) */
position: absolute;
background: url(images/bg_sub_left.png) no-repeat 0 100%;
padding: 10px 10px 0 10px;
margin-left: -3px;
}
.custom ul.mega-menu li .sub { /* dropdown submenu itself */
margin: -8px 0 0 -8px;
background: #E3DDD3
url(images/bg_sub.png) no-repeat 100% 100%;
padding: 00px 20px 20px 10px;
border: 1px #D1C6B4;
border-style: none solid solid solid;
/* rounded corners */
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
/* dropshadow effect */
-webkit-box-shadow: 0px 4px 6px rgba(50, 50, 50, 0.6);
-moz-box-shadow: 0px 4px 6px rgba(50, 50, 50, 0.6);
box-shadow: 0px 4px 6px rgba(50, 50, 50, 0.6);
}
.custom ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;}
.custom ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;}
.custom ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 120%; line-height: 2;} /* li of dropdown submenu */
.custom ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;}
.custom ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;}
.custom ul.mega-menu li .sub a, .custom ul.mega-menu li .sub span {background: none; border: none; text-shadow: none; color: #111; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}
.custom ul.mega-menu li .sub li.mega-hdr .mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #6B6B6B url(images/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff; text-shadow: 1px 1px 1px #333;}
.custom ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #000; text-shadow: none;}
.custom ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(images/arrow_off.png) no-repeat 5px 8px; font-weight: normal;}
.custom ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(images/arrow_on.png) no-repeat 5px 8px;}
.custom ul.mega-menu .sub ul li {padding-right: 0;}
.custom ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;}
.custom ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}
.custom ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(images/arrow_off.png) no-repeat 7px 10px;}
.custom ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(images/arrow_on.png) no-repeat 7px 10px;}
It's because your #headerNav is set to overflow:hidden. Just remove this line of css:
#headerNav {
…
overflow: hidden;
…
}