I recently took over a friend's site and have been having a fun (read: not fun) time dealing with the theme that was built for it. My current issue are the menus. The first tier of the dropdown menu is centered, which is fine, but the second is pushed to the right, which is a problem with this theme. Since the menu is easier to fix, that's what I am trying to attack, but I CANNOT figure out what to change to push the menu to the left.
Here is my current CSS:
.menu-maine-menue-container {
width: 990px;
margin-left: auto;
margin-right: auto;
font-weight: bold;
}
.menu-maine-menue-container ul {
clear:left;
float:left;
list-style:none !important;
margin:0;
padding: 8px 0px 0px 0px;
position:relative;
left:50%;
text-align:center;
}
.menu-maine-menue-container ul li {
list-style:none !important;
position:relative;
right:50%;
padding: 0px 22px 8px 22px;
float: left;
font-weight: normal;
color: #fbfbd5;
text-shadow: rgb(0, 0, 0) 2px 2px 0px;
font-family: 'Sohoma';
font-size: 20px;
text-transform: uppercase;
letter-spacing: .05em;
}
.menu-maine-menue-container ul li:first-child {
padding-left: 0px ;
}
.menu-maine-menue-container ul li a {
color: #fbfbd5;
}
.menu-maine-menue-container ul li a:hover {
color: #d5f4ed !important;
text-decoration: none;
text-shadow: rgb(0, 0, 0) 2px 2px 3px;
}
.current-menu-item a, .menu-maine-menue-container ul li a:active {
color: #d5f4ed !important;
}
.menu-maine-menue-container ul li a:active {
text-shadow: none !important;
}
/* SUB MARINE MENUZ */
.menu-maine-menue-container ul ul {
list-style: none;
margin:0; /* Appear just below the hovering list */
padding:0;
width:220px; /* specify the width. */
position:absolute; /* needed */
z-index:500; /* specify the order */
}
.menu-maine-menue-container ul li ul {
top:27px; /* Positioning:Calc with top level horz list height */
}
.menu-maine-menue-container ul ul ul {
top:0;
left:100%; /* Position the sub menus to left. */
}
.menu-maine-menue-container ul li ul li {
float:left;
padding: 12px 8px 9px 8px !important;
margin-left: auto; margin-right: auto;
background: #eb5a4e;
width: 200px;
text-align: center !important;
}
.menu-maine-menue-container ul li ul li:last-child {
padding-bottom: 15px;
}
.menu-maine-menue-container ul li li a {
font-size: 17px;
line-height: 19px;
text-align: center !important;
width: 200px;
}
/* Drop Down! */
/* Hide all the dropdowns (submenus) */
.menu-maine-menue-container ul ul,
.menu-maine-menue-container ul li:hover ul ul,
.menu-maine-menue-container ul ul li:hover ul ul
{ display: none;}
/* Display the submenus only when li are hovered */
.menu-maine-menue-container ul li:hover ul,
.menu-maine-menue-container ul ul li:hover ul ,
.menu-maine-menue-container ul ul li ul li:hover ul
{ display: block;}
The site is freejeremy.net and the area of issue is "Support" and "Prisoner Soldarity."
The rule you need to change is .menu-maine-menue-container ul ul ul which has left:100%
Change the 100% to -50% (or something similar) and you should be fine..
Related
I'm using this accordion menu module in joomla 2.5 http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/accordion-menus/21961 , and the problem is that the submenu items have a bigger font than the menus in the starting level. I found in the template .css file where I can edit the size of the starting level menus, but not for the submenus. Here's a screenshot how it looks http://img7.imageshack.us/img7/1180/tikx.png
And here is the css code of this module:
.accordion-menu a{
text-decoration: none;
background: none;
font-family: Arial;
}
.accordion-menu a:hover,
.accordion-menu a:visited,
.accordion-menu a:active,
.accordion-menu a:focus{
background: none;
}
.accordion-menu a img {
vertical-align:middle;
border: 0 none;
height: auto;
max-width: 100%;
padding:0 5px 0 0;
}
.accordion-menu li{
cursor: pointer;
background:none !important;
}
.accordion-menu .opened{
border-bottom:none!important;
}
.accordion-menu li:last-child, .accordion-menu > li.last {
border-bottom: 1px solid #1a1a1a!important;
margin-bottom:-1px;
}
.accordion-menu > li > .item-wrapper{
height: 35px;
display:inline-block;
width:100%;
}
.accordion-menu > li > .item-wrapper a{
line-height: 35px;
font-size: 12px;
font-weight: bold;
}
.accordion-menu li .item-wrapper .menu-button{
width: 16px;
height: 16px;
margin: 9px 5px 0px 5px;
overflow: hidden;
}
.accordion-menu li .item-wrapper .menu-link{
width:81%;
}
.accordion-menu li .ul-wrapper{
display: none;
}
.accordion-menu li ul li .item-wrapper{
/* height: 30px; */
display:inline-block;
width:97%;
}
.accordion-menu li ul li .item-wrapper a{
line-height:35px;}
ul.accordion-menu li ul {
margin:0px;
padding:0px;
margin-bottom:-1px;
}
ul.accordion-menu li ul li .item-wrapper{
margin:0px;
padding-left:12px!important;
}
ul.accordion-menu li ul li li{
margin:0px;
padding-left:0px!important;
}
The line you want to change is this:
.accordion-menu li ul li .item-wrapper a {
line-height:35px;
font-size: 12px; /* Add this in */
}
Hope this helps
I am not exactly sure how to ask this question. I am new to responsive design and understand the flow down, but I don't want to use the flow down on my menu. It is broken into 3 sizes and the mobile size, I don't want sub-menus and need it at 100% width. How do I block the information from the previous id and class selectors.
/*------------menu */
nav {font-family: "BenchNine", "PT Sans Narrow", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width:960px;
height: 43px;
margin: 0px auto 0px auto;
/*background:#0084FC;*/
border:0px solid #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index:10;
}
/*nav ul {list-style: none;margin: 0;padding: 0 5px; } */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {margin: 0;padding: 0 5px;list-style: none;position: relative;display: inline-table; z-index:1;}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li span { width:425px;}
nav ul li {
float: left; position: relative; padding: 0px; top:0px;border-top:0px solid #0082f8;
}
nav ul li:hover {
background: #025287;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {font-size: 20px; color: #B3DBFF; display: block; padding: 54px 10px 6px 10px; margin-bottom: 0px; z-index: 10; position: relative; font-weight:bold; text-transform:uppercase;}
nav ul ul {
background: #0082f8; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 0px solid #0082f8;
border-bottom: 0px solid #0082f8;
position: relative;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #025287; color:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is the css for the menu in the responsive css file.
#media only screen and (max-width: 767px) {
nav {width:100%;background:none;height:auto;margin: 0px auto 15px auto;}
nav ul li {float: none;background:#000;text-align:center;padding-bottom:0px;margin-top:5px;}
nav ul li span {clear:}
nav ul li:hover {background: url('../images/menu-bg-act_mob2.png') repeat-x;}
nav ul li a{margin-bottom : 0px;}
nav ul li a{margin-bottom : 0px;}
Your question is not very clear, but it sounds like you need to override some existing style declarations.
You should be able to do this by making more specific declarations.
E.g.:
html nav { margin: 20px } will override nav { margin: 10px }.
Check out Andy Clarke's CSS Specificity Wars for more on the subject.
I'm pretty sure this is an easy fix and I am simply too in experienced to figure it out. I'm building a site, using WP, but the home page is simply a background image with a vertical nav menu. I don't now how to make the menu stay in the same place for all browsers and windows. It looked good on my screen, then I found the nav pane was in a completely different place on my husband's monitor. I believe it has to do with position and display and margins, but I am getting more lost as I read up on these and I just want someone to tell me the code.
The page is at www.sydneyjanebaily.com
So far the code for the whole page is as follows:
body {
background-image:url(http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png);
background-repeat:no-repeat; background-attachment:fixed;
background-position:center;
}
menu { display: block; }
access div { display: block; margin-left:890px; margin-right:auto; margin-top:200px; width: 235px; }
/************* Navigation **********/
nav#access ul, nav#access li.pagenav { display: block; list-style:
none; }
nav#access ul li a span, nav#access ul li.page_item a span { position:
absolute; right: 100%; top: 2px; width: 15px; height: 100%;
background-image: url(../images/nav-shadow.png); background-position:
right top; background-repeat: repeat-y; }
nav#access ul li a, nav#access ul li a:visited, nav#access ul
li.page_item a, nav#access ul li.page_item a:visited { display:
block; padding: 8px 10px 8px 30px; color: white; font: 150%
"EBGaramondSC", "Palatino", "Palatino Linotype","Book Antiqua",
Georgia, serif; text-decoration: none; /*background-color:
aba000; */ margin: 5px 0 7px 0; position: relative; width: 235px; /font-variant: small-caps;/ }
nav#access ul li a:hover, nav#access ul li a:focus, nav#access ul
li.page_item a:hover, nav#access ul li.page_item a:focus{ color:
FF0000; }
nav#access li a:hover span { background-color: #666; } nav#access ul
li a em { font-size: 87.50%; } nav#access ul li:nth-child(5n-4) a,
nav#access ul li:nth-child(5n-4) a span { ; } nav#access ul
li:nth-child(5n-3) a, nav#access ul li:nth-child(5n-3) a span { ; }
nav#access ul li:nth-child(5n-2) a, nav#access ul li:nth-child(5n-2) a
span { ; } nav#access ul li:nth-child(5n-1) a, nav#access ul
li:nth-child(5n-1) a span { ; } nav#access ul li:nth-child(5n-5) a,
nav#access ul li:nth-child(5n-5) a span {; } -->
nav#access ul li ul li span { position: absolute; right: 100%; top: 0;
width: 20px; height: 100%; left: 2px; margin-right: 15px; overflow:
visible; } nav#access ul li ul li:nth-child(odd) a { background:
none; color: #EEE8AA; font-size: smaller; margin: 3px 20px 5px 20px;
min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access
ul li ul li:nth-child(odd) a:hover, nav#access ul li ul
li:nth-child(odd) a:focus { background: none; color: #ADFF2F;
font-size: smaller; left: 15px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li:nth-child(odd) a span { background:
url(../images/sub-menu2.png) -5px 0px no-repeat; width: 30px; }
nav#access ul li ul li:nth-child(even) a { background: none; color:
3B3C1D; font-size: smaller; margin: 3px 20px 5px 20px; min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access ul li ul
li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even)
a:focus { background: none; color: #FF4500; font-size: smaller; left:
15px; padding: 2px 30px 2px 25px; } nav#access ul li ul
li:nth-child(even) a span { background: url(../images/sub-menu2.png)
-5px 0px no-repeat; width: 30px; }
nav#access ul li ul li ul li:nth-child(odd) a { background: none;
color: #FFD700; font-size: smaller; margin: 3px 20px 5px 30px;
min-height: 20px; width: 200px; padding: 2px 0 2px 20px; } nav#access
ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul
li:nth-child(odd) a:focus { background: none; color: #EEE8AA;
font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li ul li:nth-child(odd) a span { background:
url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }
nav#access ul li ul li ul li:nth-child(even) a { background: none;
color: #3B3C1D; font-size: smaller; margin: 3px 20px 5px 30px;
min-height: 20px; width: 200px; padding: 2px 0 2px 20px; } nav#access
ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul
li:nth-child(even) a:focus { background: none; color: #7FFFD4;
font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li ul li:nth-child(even) a span { background:
url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }
nav#access ul li a:hover:active, nav#access ul li ul li
a:hover:active, nav#access ul li ul li ul li a:hover:active,
nav#access ul li a:focus:active, nav#access ul li ul li
a:focus:active, nav#access ul li ul li ul li a:focus:active { color:
00CCFF; left: 1px; top: 1px;}
/* Singular navigation */
nav-single { float: right; position: relative; top: -0.3em; text-align: right; z-index: 1; }
nav-single .nav-previous,
nav-single .nav-next { float: none; width: auto; }
nav-single .nav-next { padding-left: .5em; }
img.book {
/* Set rules to fill background */
min-height: 100%;
min-width: 1000px;
/* Set up proportionate scaling */
height: auto;
/* Set up positioning */
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"
width="880" height="xxx" /> -->
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',
'twentyeleven' ); ?>">
"> -->
'primary' ) ); ?>
I am puzzled that when I inspect an element using Firefox developer tool, it still says inline element for things I've marked as block.
Basically, I can put the nav pane where I want using px but it only looks right on my screen. I think I need percentages, but that is beyond me. Please help.
Thanks,
Sydney
Try replacing this:
#access div {
display: block;
margin-left:890px;
margin-right:auto;
margin-top:200px;
width: 235px;
}
with this:
#access div {
position: absolute;
top: 20%;
left: 50%;
}
It works well on my monitor no matter how I squash or stretch the screen, and it should work for you as well. Good luck!
I am about read to pull my hair out! Whenever you over over the dropdown navigational menu, the hover image drops below where it should be and stretches. Then the dropdown area disappears when you try to mouse to it. You can see this in action at http://pauldrayton.com/sites/waterdamagesegeorgia/. I've tried playing with the z-index to see if that could be the issue, but I have yet to figure it out!
Here's the CSS. Any help would be appreciated.
#access {
display: block;
float: left;
margin: 0 ;
margin-right:24px;
margin-top:-30px;
border-bottom: 2px solid #CCC ;
width: 990px;
z-index: 100;
}
#access .menu-header,
div.menu {
font-size: 14px;
margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
float:right;
position:relative;
margin: 0 0;
margin-right:24px;
}
#access .menu-header ul.sub-menu li {
box-shadow: 3px 3px 3px #999;
-moz-box-shadow: 3px 3px 3px #999;
-webkit-box-shadow: 3px 3px 3px #999; }
#access .menu-header li,
div.menu li {
float: right;
position: relative;
padding:0px;
background:url(images/mantra_menu.png) top left no-repeat;
height: 27px;
margin-right:10px;
z-index: 101;
}
#access li.current_page_item {
background:url(images/mantra_menu_current.png) top left no-repeat;
border-bottom:none;
}
#access li.current-menu-item {
background:url(images/mantra_menu_current.png) top left no-repeat;
border-bottom:none;
}
#access a {
color: #FFFFFF;
display: block;
height: 27px;
margin-left:10px;
padding-right: 10px;
padding-top:4px;
padding-right:25px;
text-decoration: none;
font-weight:normal !important;
background:url(images/mantra_menu.png) top right no-repeat;
position:relative;
right:-10px;
z-index: 102;
white-space:nowrap;
}
#access .menu-header li:hover,
div.menu li:hover, #access a:hover {
color:#0C85CD ;
}
#access ul ul {
display: none;
position: absolute;
top: 29px;
right: 0px important;
float: right;
z-index: 104;
background:url(images/mantra_menu_down.png) 0px 0px no-repeat;
padding:12px 0px 0px;
/*border-bottom:1px solid #CCC;*/
margin-top:-30px;
}
#access ul ul li {
display:block !important;
background:#FFF !important;
/* border-left:1px solid #CCC;
border-right:1px solid #CCC;*/
margin-left:0 !important;
margin-right:0px !important;
/*padding-left:10px;
padding-right:10px;*/ /* disabled for submenu width fix */
padding-top:6px;
z-index: 105;
}
#access ul { }
#access ul li { }
#access ul li ul {
display: none; /* submenu width fix */ }
#access ul ul li { /* level 2 */
border: 0;
width: 100%; /* submenu width fix */
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
white-space: pre;
}
#access ul ul ul li { /* level 3 */
border: 0;
/* width: 100%;*/
width: auto;
display: block;
float: none;
border-top: 1px solid #EEE;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
white-space: pre; /* submenu width fix */
z-index: 106;}
#access ul ul a { display: block; padding: 3px 20px 0 10px !important;
/* submenu width fix */ }
#access ul ul a, #access ul ul ul a {
margin:0 !important;/*padding:0 !important;*/
left:0 !important;
color:#5F5B5B;
border-bottom:none;
background:none !important;
}
#access ul ul li:hover, #access ul ul ul li:hover {
background:#FCFCFC !important;
}
#access ul ul ul {
left: 100%;
top: 0;
background:url(images/mantra_menu_right.png) 0px 0px no-repeat;
padding:0px 0px 0px 12px;
z-index: 107;
/*border:1px solid #CCC;*/
}
#access li:hover > a {
color:#0E85CD ;
}
#access ul ul :hover > a {
color:#0E85CD;
}
#access ul li:hover > ul {
display: block;
z-index: 108;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-item > a{
color: #000 !important;
background:url(images/mantra_menu_current.png) top right no-repeat;
}
#access ul ul li.current_page_item ,
#access ul ul li.current-menu-ancestor,
#access ul ul li.current-menu-item ,
#access ul ul li.current-menu-parent {
color: #000 !important;
background:#FFF !important;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #5F5B5B ;
background:url(images/mantra_menu_current.png) top right no-repeat;
}
I made the following changes:
#menu-main-navigational {
position:relative;
}
#access .menu-header ul {
position:absolute;
}
and it worked for me
Give the .sub-menu element a position of absolute instead of relative. The relative causes it to force its parent element to expand. You will also need to give it a fixed width as it will no longer resize to its parent. And edit out any rules that override that property on the element.
I'm having problems trying to figure out why my drop down navigation is settling under where they are suppose to in IE 6 and IE 7. Any help you could give me would be life saving for me.
the css file for the drop down nav
#nav-bar { /*Container Div*/
width: 950px;
height: 45px;
background-image:url(images/nav-bar-background.jpg);
background-repeat: no-repeat;
margin: 7px 0 2px 0;
z-index:999;
position:relative;
padding:0;
}
/*First Level*/
#nav-bar ul {
padding: 10px;
text-align:center;
margin-top: 6px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding:0 9px 40px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
/*First Level HOVER*/
#nav-bar ul li a:hover {
background-image: url(nav.png);
background-repeat: repeat-x;
}
* html ul#nav-bar li a {
height:37px;
margin-top:-10px;
}
ul#nav-bar>li a:hover, ul#nav-bar>li:hover {
background-position:0px -20px;
height:37px;
text-decoration:none;
}
* html ul#nav-bar li a:hover, * html ul#nav-bar li:hover, * html ul#nav-bar li.hover {
background-position:0px -20px;
height:27px;
}
#nav-bar ul ul {
background-image:url(images/secondtierbg.gif);
display:none;
}
#nav-bar ul ul li {
width:100px;
}
#nav-bar ul ul li a {
line-height:26px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding: 10px 9px 20px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
#nav-bar li:hover ul, #nav-bar li.hover ul {
display:inline;
position:absolute;
left:0;
top:44px;
width:950px;
height:26px;
margin:0 auto;
padding: 0;
z-index:200;
}
* html #nav-bar li.hover ul {
height:37px;
}
/*
#nav-bar li:hover li {
list-style:none;
display:inline;
color:#fff;
margin:5px 0px 0 20px;
padding:0;
}
*/
#nav-bar li:hover li a, #nav-bar li.hover li a {
color:#fff;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-top: 10px;
padding: 5px;
text-decoration:none;
}
#nav-bar li:hover li a:hover {
background:none!important;
}
/* THIS IS FOR DROP DOWNS */
#nav-bar ul ul ul {
visibility: hidden;
background-image: none;
display: block;
margin: 0px;
padding: 0px;
list-style: none;
}
#nav-bar ul ul ul li {
display: block;
width:100px;
height: auto;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
font-size: 11px;
background-color:maroon;
border-style: solid;
border-color: white;
border-width: 1px 1px 0 1px;
padding: 5px 0;
float: none;
clear: both;
}
#nav-bar ul ul #firstrange li {
width:100px;
}
#nav-bar ul ul ul li:last-child {
border-bottom: 1px solid white;
/*background:transparent;*/
}
#nav-bar ul ul ul li a{
cursor:pointer;
line-height:14px;
}
#nav-bar ul ul li:hover ul {
visibility: visible;
left:0;
position:absolute;
margin-top:0;
top:31px;
z-index:220;
}
#nav-bar ul ul li:hover {
position:relative;
}
the link is:
http://www.paysonsecure.com/colonialwarsct/
notes/advice/question:
Think about how you can make this work in two levels.
I had difficulties trying to get the second level to show in IE(Something you might wanna work on too).
Consider having a vertical sub-menu. It's easier for the user to navigate.
Question. How much content is going to go in each year? If not much, maybe you can group years content.
I re-worked the css for the navigation I think its a good start - if you wish.
http://jsfiddle.net/EvRem/1/
Hope this made sense