Superfish Question

[sinead]

Hi,

I haven’t used Superfish before and I’m fixing up a website where the previous designer used it on the menu block.
I’ve managed to edit the code to change the background color and text on the drop down menus and changed the background hover color. But I can’t manage to change the color of the text once its been selected or clicked.
Here’s the code that’s worked but can anyone tell me what I need to add to change the color of the selected menu text?

header#top .sf-menu li ul li a {

font-size: 12px;

line-height: 13px;

color: #000000;

transition: none;

letter-spacing: 0;

background-color: #797D7F;  

}

.sf-menu li ul li a:hover, .sf-menu li ul li.sfHover > a

{
color: #154360;

background-color: #283747!important;

}

[Shikkediel]

I suppose that would be this:

header#top .sf-menu li ul li a:visited {
  color: #000000;
}

[sinead]

Hey Shikkediel,
Thanks for the response…but that’s not working : – (

[Shikkediel]

Maybe you could share a link then. It’s sort of a guessing game otherwise… I can’t seem to find a relevant demo of this plugin either.

[sinead]

Here’s the link….(I hope) to the full superfish code relating to the dropdown menu and their appearance.

Thanks again, i appreciate you looking at this.

https://codepen.io/sinead/pen/rWWzOV

[Shikkediel]

I’m afraid I can’t say much on the basis of CSS alone. Isn’t your site online? It would need an inspection of the HTML to figure out what text you’re talking about exactly.

[sinead]

Hey thanks for getting back. No, the site wasn’t live but it is now:
http://www.michaelmortell.ie/

When you hover on the Gallery menu, the drop down appears and I can modify the background and text colour. But once you click on a menu option, the text turns gold and this is the color I can’t seem to change.

I’d really appreciate any further help…its been driving me mad.

[Shikkediel]

Looks like I was pretty close before…

header#top .sf-menu li ul li a:visited {
  color: #000000 !important;
}

Make sure you paste this rule after all the other ones so it won’t get overwritten again. And change it to the desired colour first of course.

Edit – might get slightly more complicated because of a submenu but maybe you could try it first…

[sinead]

Thanks again Shikkediel I did try it after all the other superfish code and then tried it in the CSS custom code editor but neither worked I’m afraid. When I saw your edit I tried this:

.sf-menu li ul li a:hover, .sf-menu li ul li.sfHover > a {
color: #f0f3f4!important;
background-color: #283747!important;
}

header#top .sf-menu li ul li a:visited, .sf-menu li ul li.sfVisited > a {
color: #A569BD!important;
}

header#top .sf-menu li ul li a:active, .sf-menu li ul li.sfActive > a {
color: #4a235a!important;
}

But no joy there either and plus I’m only guessing and using code from other lines and amending it. At this stage I think I’ll live with the gold color and just increase the size of the text so its more legible.
Thanks again though for your time. I appreciate it

[Shikkediel]

No trouble. I see the site’s not active anymore but I can say that I pasted the style in the last stylesheet in developer tools and it looked like it had the right effect. Maybe you could come back on it when it’s ready to go online again.

[sinead]

Thanks for that. I took it offline as the owner doesn’t want it live yet. But its online now again. I’ll try that myself and see…..

[Shikkediel]

I think the problem is that the CSS for the plugin is the very final (inline) style inside the head section of the page. So it overwrites previous definitions. If you’re not able to access this – or paste another inline style element inside the head after it, there’s always the dirty way:

<script>
jQuery(function($) {
    var style = '<style>header#top .sf-menu li ul li a:visited {color: #000000 !important;}</style>';
    $('head').eq(0).append(style);
});
</script>

Confirming again it looks to be working when the style is in the correct place…

[Author]

Posts