WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Canvas Theme - Drop Down Menu (8 posts)

  1. rapportdesign
    Member
    Posted 1 year ago #

    I'm in need of help styling a drop down menu in the Canvas Theme.

    http://www.kasedesign.co.uk/cardiff/

    I've copied the code from...
    http://www.woothemes.com/tutorials/change-the-color-of-the-drop-down-nav-menus/
    I've pasted it into custom.css of the Canvas Theme and the changes to the styles that I've made seem to have no effect.

    Ideally, I want the drop down container to have a white background, with a slight transparency, which I've managed to achieve, by adding the following code...

    .sub-menu #navigation ul.nav > li a:hover, #navigation ul.nav > li:hover, #navigation ul.nav li ul {
      background-color: rgba(255, 255, 255, 0.8) !important;
    	background-image:none;
    }

    I would also like plain grey text, with a red text rollover.

    I hoped that the following code would at least change the text color...

    ul.sub-menu li a {
    	color:#686868;
    }

    I don't want the red striped background that appears for the parent items.

    I've also noticed that the background of the parent item disappears, when hovering over a child.

    Any help with this would be greatly appreciated!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you tried contacting the theme's vendors?

  3. rapportdesign
    Member
    Posted 1 year ago #

    Sorry, I thought this was the place to do that.

    I've located the correct place to ask my question now.

    Thanks!

  4. rapportdesign
    Member
    Posted 1 year ago #

    I've managed to sort most of these issues out, but I'm really struggling to make the child links (normal state) grey without making the parent links (normal state) grey as well.

    I want the parent links (normal state) to remain white.

    Please can anyone help me with this?

    I don't believe this is theme related.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try applying the CSS to the <ul> within the <ul>.
    E.g

    ul ul li a {
     color: #000;
    }
  6. rapportdesign
    Member
    Posted 1 year ago #

    Thanks for your input... I tried your suggestion applied against id main-nav, but it didn't help...

    #main-nav ul ul li a {
      color: #4E4E4E !important;
    }

    I'm currently using the following CSS, of which most the styles are being applied...

    #main-nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    	color:#4E4E4E !important;
    	text-decoration:none;
    	background-image:none !important;
    	height:auto;
    	line-height:inherit;
    	text-align:left;
    }

    The color just does't take effect and I thought !important meant that the style would override any conflicts, especially when appearing after any other potentially conflicting styles.

    I've even tried applying it to a particular menu id, but nothing seems to work.

    I've located the following code in Firebug and changing this to grey works, but also changes the parent (normal state) color...

    #navigation ul.nav > li a:hover, #navigation ul.nav > li:hover a, #navigation ul.nav li ul li a {
      color: #FFFFFF !important;
    }

    I therefore tried...

    #navigation ul.nav li ul li a {
      color: #4E4E4E !important;
    }

    This doesn't make any changes.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try

    #navigation ul.nav > li:hover ul a {
    color: #4e4e4e !important;
    }

    Make sure you remove styling that serves no purpose.

  8. rapportdesign
    Member
    Posted 1 year ago #

    Thank you very much!

    That worked a treat... I had to re-apply my hover state CSS, but it's all sorted now.

    I realise I have a ton of unnecessary menu css in there at the mo and will begin the tidy up.

    Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic