I have a problem here.
I'm using wordpress and I was confused.
How to stick background behind the nav bar?.
I activated LowerMedia Sticky.js menu's plugin, then I want to change my navbar background color. I try to add a background: #000; in #navigation. It's look okay, but when I scroll down, the navigation background is not move. There's only the navigation text that moved. I try to move background: #000; to #navigation .sf-menu a but the background is only appear around the text, even it move with the text when I scroll down. I don't know what to do now. Please help me. Thanks before.
This is my site : vitraprawira.net
This is my final navbar css code:
/* Main Navigation
================================================== */
/*hide responsive nav*/
#top-bar .selector, #navigation .selector { display: none; }
/*core*/
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { line-height: 1.0 }
.sf-menu ul { position: absolute; top: -999em; width: 180px; }
.sf-menu ul li { width: 100% }
.sf-menu li:hover { visibility: inherit }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0px; top: 30px; z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 180px; top: 1px; }
/*styling*/
#navigation-wrap { position: relative; display: block; }
#navigation { margin-left: 170px; margin-right: auto; position: relative; height: 55px; transparent: none; }
#navigation .sf-menu > li:hover > ul, .sf-menu li.sfHover > ul { top: 50px }
#navigation ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; top: 0; }
#navigation .sf-menu a { font-size: 1.000em; height: 55px; line-height: 55px; color: #fff; background: #000 url("images/vintage.png"); }
#navigation .sf-menu > li > a { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
#navigation .sf-menu li { float: left; position: relative; }
#navigation .sf-menu > li { background: url("images/dash.png") right center no-repeat; margin-right: 20px; padding-right: 20px; }
#navigation .sf-menu > li:last-child { margin: 0; padding: 0; }
#navigation .sf-menu > li > a:hover { color: #fff }
#navigation .sf-menu > .current-menu-item > a { color: #7094DB }
#navigation .sf-menu > li.sfHover > a { color: #fff }
/*drop-down styles*/
#navigation .sf-menu ul { position: absolute; nowhitespace: afterproperty; top: -999em; width: 200px; z-index: 9999; left: 0; border: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,0.08); }
#navigation .sf-menu ul > li:last-child { -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }
#navigation .sf-menu ul li { background: #000; border-bottom: 1px solid rgba(0,0,0,0.05); }
#navigation .sf-menu ul li:first-child { border-top: 0 }
#navigation .sf-menu ul li:last-child { border-bottom: 0 }
#navigation .sf-menu ul a { display: block; padding: 10px; color: #fff; height: auto; margin: 0px; border: 0px; line-height: 1.8em; font-size: 0.923em; text-shadow: none; }
#navigation .sf-menu ul li > a:hover { color: #7094DB; background: #2D3B58; }
If you're wanting the color/image to appear behind the entire menu block, then you're localizing the background too close to the anchor element.
Just do this: #navigation {background: #ccc;} or whatever color you want.
Related
My CSS Menu pops the browser's horizontal scroll bar on and off as I hover over menu items. I've tried various combinations of css to deal with overflow using;
overflow-x:hidden;
and
overflow-y: auto;
But these just cut off my drop down elements in the menu and puts in a scroll bar inside my menu.
Here's my source code for the menu:
/* Main Menu*/
#menu {
font-family: 'sharetech', sans-serif;
float: right;
height: auto;
font-size: 18px;
padding: 0;
margin: 14px 0 0 0;
}
#menu a {
display: block;
line-height: 1em;
text-decoration: none;
color: gray;
padding: 2px 10px;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul, #menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul {
position: relative;
z-index: 597;
}
#menu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#menu ul li.hover,
#menu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#menu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#menu ul ul li {
float: none;
}
#menu ul ul ul {
border-top: 0 none;
top: 0;
left: auto;
right: -99.5%;
}
#menu ul li:hover > ul {
visibility: visible;
}
#menu ul ul {
bottom: 0;
left: 0;
margin-top: 0;
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#menu ul ul a{
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 10px 10px;
}
#menu ul ul li {
font-weight: normal;
position: relative
}
#menu > ul > li > a {
line-height: 48px;
}
#menu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#menu ul ul li:hover > a {
background: #35a6ff;
}
#menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#menu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#menu ul ul li.has-sub > a:after {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#menu ul li:hover > a, #menu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#menu ul li.has-sub > a:after {
margin-left: 5px;
}
#menu ul li.last ul {
left: auto;
right: 0;
}
#menu ul li.last ul ul {
left: auto;
right: 99.5%;
}
You were right Nix, it was in the pseudo classes. I figured it was, here's what was missing;
#fmenu ul ul li {
float: none;
width: 190px; <----set width
}
I defined a set width here and it solved the problem.
I am unable to get rid of a gap between my nav bar and my submenu dropdown menu. You can view the issue here.
My css is here:
nav#nav{
float: left;
font: 14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
margin-right: auto;
z-index: 99999;
/*background-image: url(../images/2blkbg.png);*/
/*background-repeat: repeat-x;*/
padding-left: 30px;
/*background-position: left bottom;*/
background-color: #000;
height: 53px;
display: block;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
#nav ul{
list-style: none;
margin: 0;
padding: 0;
}
#nav ul li{
float: left;
margin-right: 0;
margin-bottom: 0;
padding-top: 0;
padding-right: 49px;
padding-bottom: 0;
padding-left: 0;
}
#nav ul a,#nav li.current-menu-ancestor a{
display: block;
height:83px;
line-height: 53px;
border-top-width: 0px;
border-top-style: solid;
border-top-color: #fff;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a{
color:#a0ce4e;
text-decoration:none;
border-color:#a0ce4e;
}
#nav ul li{
position: relative;
}
#nav ul ul{
display: none;
position: absolute;
top: 0px;
left: 0;
width: 170px;
background: #edebeb;
z-index: 100000;
border-top: 3px solid #a0ce4e;
z-index: 99999;
}
#nav ul li:hover ul{
display: block;
}
#nav ul li ul li{
display: block;
float: none;
margin: 0;
padding: 0;
background-image: url(../images/blkbg.png);
background-repeat: repeat-x;
}
#wrapper #nav ul li ul li a{
background: url(../images/subnav_sep.jpg) repeat-x bottom left;
border: 0;
height: 30px;
text-indent: 20px;
font: 13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif;
color: #333333 !important;
}
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{
background-color:rgba(255,255,255,0.5);
}
#nav ul ul ul{
display:none !important;
}
#nav ul ul li:hover ul{
display:block !important;
top:-3px;left:170px;
}
#nav select{
max-width:100%;
display:none;
}
#nav > li > a,#nav li.current-menu-ancestor a {
height:83px;
line-height:83px;
}
#nav ul ul {
top:86px;
}
Set the top and that will remove the excess of gap:
#nav ul ul {
top:86px;
}
Good you posted the url, since problem is not in the css you included. The problem is in this class:
#nav ul ul {
top:86px;
}
This top-offset should be set to 53px, the same height as your menu bar (nav#nav):
#nav ul ul {
top:53px;
}
This css-class actually is not in your css-stylesheet, but in your page itself. It is included in the <head></head>.
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 have some pretty good experince coding my own UL's but I'm relatively new to wordpress. Confusing to me to work backwards especially when I can't see the html. Anyway I'm using the cufon WP plugin to change the font in the menu. but....with the size I want the font, it shrinks the list item as well as the a:hover. There is somehting in the padding i presume, but I can't find it. you can see what I mean here http://www.thedailyminx.com
here is the menu's css
#navbar {
float: left;
display: block;
background: #bfbcc6;
color: #000000;
width: 978px;
height: 30px;
font-size: 25px;
font-family: 'jc-hand';
margin: 15px auto 15px;
padding: 0px 0px 0px 0px;
border: 1px solid #DDDDDD;
position: relative;
z-index: 9;
}
/*** ESSENTIAL STYLES ***/
.menu, .menu * {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
line-height: 1.0;
}
.menu ul {
margin: 0px;
padding: 0px;
}
.menu ul ul, ul.menu ul {
position: absolute;
top: -9999px;
width: 160px; /* left offset of submenus need to match (see below) */
}
.menu ul li ul li, ul.menu ul li {
width: 100%;
margin: 0px 0px 0px 0px;
}
.menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.menu li {
float: left;
display: inline-block;
position: relative;
}
.menu a {
display: inline-block;
position: relative;
}
.menu li:hover ul,
.menu li.sfHover ul {
left: 0;
top: 30px; /* match top ul list item height */
z-index: 99;
}
ul.menu li:hover li ul,
ul.menu li.sfHover li ul {
top: -9999px;
}
ul.menu li li:hover ul,
ul.menu li li.sfHover ul {
left: 160px; /* match ul width */
top: 0;
}
ul.menu li li:hover li ul,
ul.menu li li.sfHover li ul {
top: -9999px;
}
ul.menu li li li:hover ul,
ul.menu li li li.sfHover ul {
left: 160px; /* match ul width */
top: 0;
}
/*** SKIN ***/
.menu .current_page_item a,
.menu .current_page_ancestor a,
.menu .current-menu-item a,
.menu .current-cat a {
background: #333333;
color: #FFFFFF;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
.menu li .current_page_item a, .menu li .current_page_item a:hover,
.menu li .current-menu-item a, .menu li .current-menu-item a:hover,
.menu li .current-cat a, .menu li .current-cat a:hover {
background: #333333 !important;
color: #FFFFFF !important;
border-left: none;
border-right: none;
}
.menu {
float: left;
margin-bottom: 0;
}
.menu a {
color: #000000;
background: none;
margin: 0px 0px 0px 0px;
padding: 0px 12px 0px 12px;
text-decoration: none;
letter-spacing: 0.1px;
line-height: 30px;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #FFFFFF;
}
.menu li li a {
display: block;
background: #F5F5F5 !important;
color: #000000 !important;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
font-size: 25px;
line-height: 30px;
text-decoration: none;
text-transform: none;
text-shadow: none;
letter-spacing: 0px;
border-right: none !important;
border-left: none !important;
}
.menu li, .menu li li, .menu li li li {
background: none;
margin: 0px;
padding: 0px;
}
.menu li:hover, .menu li.sfHover {
margin: 0px;
padding: 0px;
}
.menu a:focus, .menu a:hover, .menu a:active {
background: #333333;
color: #FFFFFF;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
outline: 0;
}
.menu li li:hover, .menu li li.sfHover {
margin: 0px;
padding: 0px;
}
.menu li li a:focus, .menu li li a:hover, .menu li li a:active {
background: #EEEEEE !important;
color: #333333 !important;
border: none;
outline: 0;
}
can anyone help me out?
Thanks
Greg
ditch the inline height styling of cufon and set it in your stylesheet to 30px
So I'm trying my hands at a css menu and I have a simple bug that I cannot fix and haven't found any help searching for it. The issue is that when I hover over a drop down menu the parent link stays highlighted and the text reverts back to the original color. Hopefully that explains it. Here's the css code, I'm sure it's a matter of adding something or fixing a line of code. You can check out the issue here, everything works fine until you visit a submenu (like in BAR or Info).
#nav, #nav ul {
text-align: center;
text-size:16px;
float: left;
width: 750px;
height: 20px;
list-style: none;
line-height: 1;
background: white;
padding: 0;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
margin: 0;
background-image: url('/images/bg.gif');
}
#nav a {
display: block;
width: 75px;
height: 20px;
color: #0000FF;
text-decoration: none;
}
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li {
float: left;
padding: 0;
width: 75px;
}
#nav li ul { /*sub menu */
position: absolute;
left: -999em;
height: auto;
width: 75px;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
border-top-width: 1px;
background-image: url('/images/submenu_bg.png');
}
#nav li li {
width: 75px;
}
#nav li ul a {
width: 75px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
You're setting the text color on #nav a:hover, but the background color on #nav li:hover. Because your submenus are contained within the li, it still counts as being hovered over even while the cursor is in the submenu. The submenus aren't contained within the link, so they don't stay highlighted and revert to their normal color. If you want the menu item to stop highlighting, move the background property to #nav a:hover instead.
Before:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
After:
#nav a:hover, #nav li.sfhover a {
display: block;
width: 75px;
height: 20px;
color: #FFF;
background: #0000FF;
}
Alternatively, if you want the menu to stay highlighted while hovering on the submenu (which looks better, IMO), move color to the li:hover. I know it's a little verbose, but it works. :-)
Before:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
After:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
}
#nav li:hover a, #nav li.sfhover a {
color:white;
}
#nav li:hover li a, #nav li.sfhover li a {
color:blue;
}
#nav li:hover li a:hover, #nav li.sfhover li a:hover {
color:white;
}
#nav li:hover, #nav li.sfhover {
color: #FFF;
height: 20px;
background: #0000FF;
}
You can try setting the color of the link on the hover of the li, like so:
#nav li:hover a {
color: #fff;
}
#nav li:hover li a
{
color: #0000FF;
}