CSS Help: Corporate Green & Blue Style | Nav Bar Selected Link

  • 1
  • Question
  • Updated 7 years ago
  • Answered
CSS Help Needed!

Please can someone supply me with the CSS Code to override the Nav Selected link on the Corporate Blue or Green Style - I have tried everything more than twice and I have had no luck.

Examples of the sites affected:
Mangopear Media.com
Network Review

Any help would be very much appreciated - I am at my wits end - I can personalise the rest of the style but just not the Selected Link on the Nav Bar.

Kind Regards,

Andi North
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
  • happy that I discovered Yola

Posted 7 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Andi,

Have you tried this one?: <!--

div.ys_menu ul li.selected a{
color:#fff;
background:#419c1d url(templates/Corporate/resources/menu-selected.png) top left repeat-x;
} -->
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Yes Diane,

I have tried that particular CSS Class. And no luck.

This is a really annoying one as I love the style and it looks great but I can not have one blue link in the navigation of a website that has a red/dark red theme (regarding: Network Review)

Kind Regards,

Andi
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
The site has now moved to a new domain:

networkreview.mangopearmedia.com

Kind Regards,

Andi
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Thanks for the update, Andi.  I am going to ask our HTML team to see if they can find the code associated with the Selected Link in the navigation menu.  Someone will get back to you within 48 hours.

Thank you
Nazlie
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Nazlie,

I thought I would comment on this one :P

Kind Regards,

Andi
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Andi,

I've taken a look at this issue. The selected a hover color is actually an image. So if you wish to change the color, you'll need to download the image and use an image editing software to change the color.

I hope that helps!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Sanja,

I understand that it is an image, I have tried overriding this image with an image of my own, and the code does not work but, exactly the same code (but a different CSS Class) works perfectly for the hover state.

The selected state does not want to change at all. This is on both of the websites that I have that are using the Corporate style.

Kind Regards,

Andi
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Andi

I have been able to change this on my own site using:

div.ys_menu ul li.selected a { color:#fff;
background:#419c1d url(resources/menu-selected.png) top left repeat-x;
}

I've attached a screenshot of this:


Please let me know if you're still not able to make this work.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Sanja,

That is not working for me - take a look at www.networkreview.mangopearmedia.com my custom css and problem are there!

I have no idea what is causing this - I have checked whether there are any other CSS Classes with the same name but no.

Kind Regards,

Andi
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Andi,

Hmm.. I wonder if it's because of your custom css? I noticed that in your Site CSS, the codes under the Site CSS tab has changed on the right-hand side. If you create a new site using that style, I believe you'll find that you can change it. Do you mind giving this a try and seeing if that might be the case?
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
That code is from some custom code - in this case my header - which I put in the header section of the tracking codes. This appears in the Site CSS box as this is the first part of the code with <!--- <style type="text/css">--->

I presume that the Site CSS feature was designed to pick up the first style tag that it see's and stops with the last!

Kind Regards,

Andi
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Andi,

It looks to me like you have a syntax error in your custom css file just above the 'div.ys_menu ul li.selected a' selector.

This could very well stop the selected rule from doing anything.

Try and sort that out see if it helps.

Lee.

Photo of TopWeddingSites

TopWeddingSites

  • 3 Posts
  • 0 Reply Likes
What exactly did you change? I'm lost.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi TopWeddingSites,

I simply removed:


voice-family: "\"
}

\"";
voice-family:inherit;
height:39px;


If you remove these from the 'active' classes, it works perfectly!

Kind Regards,

Andi
Photo of TopWeddingSites

TopWeddingSites

  • 3 Posts
  • 0 Reply Likes
Did that but still have these dark blue, almost black, nav tabs that show up under each of the nav tabs - almost like its supposed to be a shadow, but it's not shaded..
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Could you share the URL for your site for me to take a closer look at your code.

Kind Regards,

Andi
Photo of TopWeddingSites

TopWeddingSites

  • 3 Posts
  • 0 Reply Likes
It's not published yet.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@sanja

Is this a style bug or some advanced CSS hack that I have never come across?

In the corporate themes there are 2 sections of the 'site css' that seem to be incorrect -

div.ys_menu a {
display: block;
float: left;
color:#000;
font-size:15px;
text-decoration:none;
margin:0;
padding: 22px 20px 0 20px;
height:61px;
voice-family: "\"
}

\"";
voice-family:inherit;
height:39px;
}

AND

div.ys_menu_2 a {
display: inline-block;
color:#000;
font-size:15px;
text-decoration:none;
margin:0;
padding: 22px 20px 0 20px;
height:61px;
voice-family: "\"
}

\"";
voice-family:inherit;
height:39px;
}

I have heard of escaping sequences in CSS but never seen it with this syntax.

Maybe the editor escaped the quotes?

Or maybe it's correct but when the above rules are applied to the custom css section it seems to cause problems with preceding rules.

Lee.
Photo of the_pete

the_pete

  • 65 Posts
  • 16 Reply Likes
Just a quick note on the comments involving css syntax being incorrect...

What you're seeing is the classic implementation of the once famous (when Internet Explorer 5 was still around) 'Box Model Hack'.

It is valid css - but it's not very pretty.

The property that appears to have invalid syntax (voice-family: "\"}\"") looks invalid because of the closing curly brace. It isn't invalid because the brace is inside a string. The hack takes advantage of Internet Explorer making that exact error (thinking it's not in a string) to send on rule to IE and another to all other browsers.

Here's a link that goes into more detail about how it actually works and what it's for.

http://tantek.com/CSS/Examples/boxmod...

In the examples that were referenced, you should note that the spacing is off and should be corrected to something described in the example above.

Happy hacking :)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Pete,

Thanks for the history lesson :)

The point still remains. It's old out dated code that does not work in the new set up.

The code above (where the 'spacing is off' ) is copied directly out of the 'site css' in the editor straight into the forum. It seems to work in the 'site css' but when copied into the 'custom css' or in fact here the spacing breaks the rule and so the preceding rule (in this post case Andi's attempt to change the selected state of the menu) does not work.

In my opinion it needs removing.

Cheers - Lee.