Canvas Theme – Drop Down Menu

  • Resolved rapportdesign

    (@rapportdesign)


    12 years, 2 months ago

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

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

    I’ve copied the code from…
    https://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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you tried contacting the theme’s vendors?

    Thread Starter rapportdesign

    (@rapportdesign)

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

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

    Thanks!

    Thread Starter rapportdesign

    (@rapportdesign)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    ul ul li a {
 color: #000;
}

    Thread Starter rapportdesign

    (@rapportdesign)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try

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

    Make sure you remove styling that serves no purpose.

    Thread Starter rapportdesign

    (@rapportdesign)

    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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Canvas Theme – Drop Down Menu’ is closed to new replies.