WordPress.org

Forums

navigation bar effect not working twenty eleven child theme (5 posts)

  1. stargirl1
    Member
    Posted 2 years ago #

    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;
    }
  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

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

    #access li:hover > a
  3. Aaron
    Member
    Posted 2 years ago #

    Deleted my comment. :)

  4. stargirl1
    Member
    Posted 2 years ago #

    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.

  5. stargirl1
    Member
    Posted 2 years ago #

    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...

Topic Closed

This topic has been closed to new replies.

About this Topic