Support » Fixing WordPress » navigation bar effect not working twenty eleven child theme

  • i’ve used the following code on my website for the navigation bar,
    but i’m not getting the full hover effect. only the text effect, not the gradients.

    i took out all my code in my child theme, and put the navigation bar code back in and it worked fine, so something is interfering with it.

    my test website: http://www.lizartlizard.com/lltest
    password is: wpdemo

    sample of how i want it to look that i found on another website: http://highlandrobotics.com/

    #access ul ul a {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	border:none;
    	color: #eee;
    	font-size: 13px;
    	font-weight: normal;
    	height: auto;
    	line-height: 1.4em;
    	padding: 10px 10px;
    	width: 168px;
    }
    #access li:hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	color: #999999;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	color: #999999;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I think the problem is you have too many duplicated selectors.
    Try to remove all duplicates of this;

    #access li:hover > a

    Deleted my comment. 🙂

    i don’t think that is the problem it worked fine when i just had that pasted in.

    i’ve also noticed my text-alignment not working, the body text is no longer justified and the paragraph headings not centered.

    edit: it’s something with the width i think, because when i adjusted the spacing so that contact/offerte came on the next line, it worked.

    also just noticed that if you hover over the “home” link, the gray hover color goes outside the margins. been plugging away at different padding but can’t figure this out. grrr…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘navigation bar effect not working twenty eleven child theme’ is closed to new replies.