Getting Rid of Navigation Menu Hover Background (Urban Polish - Style Sheet)

  • 1
  • Question
  • Updated 5 years ago
I am using the Urban Polish style sheet and have had a lot of luck modifying the CSS for the most part almost in every Style I have used - but this one has me baffled.

Instead of using a background colour to hover or on select it is using file with a background colour that appears to be a pixel big that is stored in Yola and using I believe Javascript to pull it in.

I have copied it over to the other side and tried to overwrite it by just going with an option for background, but nothing I do works - it always seems to go back to that code as there.

listed is code below...... I just want to highlight that background a different colour. I even tried creating my own file and using the javascript as is....but that didn't work either.

Anyone out there with CSS and modifying Yola templates....would greatly appreciate the help. I figured everything else out but this.

_______________________

div#menu ul li a:hover {
background:url(http://s3.yolacdn.net/V0000354/templa...) repeat-x top left transparent;
_behavior: url(http://s1.yolacdn.net/V0000354/templa...);
color:#000;
text-decoration:none;
}

Karen
Photo of Karen

Karen

  • 100 Posts
  • 7 Reply Likes
  • frustrated and anxious

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Karen,

This CSS will remove the background from your navigation menu for both selected and hover states. I have replaced the called url with the statement none

You can try and add your own background colour code or you can create a background of the same specifics but different colour with gradient as the original and store it in your file manager and call it from there.

I haven't altered the font colour which you can easily do if you wish.

div#menu ul li a:hover{
background:none;
color:#000;
text-decoration:none;
}
div#menu ul li.selected a{
background:none;
color:#000;
text-decoration:none;
}
Photo of Karen

Karen

  • 100 Posts
  • 7 Reply Likes
Hi GOP -

thank you so much but for some reason that won't override that existing CSS either. I have never had an issue overriding too much of anything - but it is like it keeps going back and reading the existing for some reason.

I thought it might be my cache so went in and cleared it and reloaded the page.

Have you ever seen where you couldn't override it. I could live with it - but I have changed most of the colours and that beige would be be better if I could do something with it and make it white or gray.

Any thoughts as to why it won't override it.

Karen
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Karen,

I have seen unsuccessful over-rides and it is possible that your experience maybe due to this.

If there are replicate over-rides of the div#menu in your case this will short circuit the effect. You need to remove any occurrences in your CSS over-rides leaving only the last one.

It may be a bit of a task but I can't see your site as I don't know the URL. Happy to look or this if you like. Just let me know the website address.

Photo of Karen

Karen

  • 100 Posts
  • 7 Reply Likes
Hi GOP -

This is the only overrides I have. I even deleted them all and added them back in. But when I save and publish .....the original code is there for the navigation. I have done this so many times on other sites ....and I am pulling my hair out trying to figure this one out.

Thank you so much for the help.

Here is the published website.....it is on a yolasite....as I am just in build mode.

http://rkfischerassociates.yolasite.com/

div#sys_banner {
margin: 10px 0 0 0;
}

div#sys_background {
width:100%;
height:530px;
border-top-style:solid;
border-color:#0FD3D3;
position:relative;
background-image: url(http://s2.yolacdn.net/V0000354/templa...);
_behavior: url(http://s1.yolacdn.net/V0000354/templa...);
background-color: transparent;
background-repeat:repeat-x;
background-attachment:scroll;
background-position: bottom center;

div#menu ul li a {
color:#fff;
display:inline-block;
margin:0 0 2px;
text-decoration:none;
font-size:14px;
text-transform:capitalize;
padding:7px;
vertical-align:center;
white-space:nowrap;
}

div#menu ul li a:hover{
background:none;
color:#000;
text-decoration:none;
}
div#menu ul li.selected a{
background:none;
color:#000;
text-decoration:none;
}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Karen,

There is some duplication still.

First group of over-rides

/* Navigation:selected */
div.sys_navigation ul li.selected a, div#menu ul li.selected a, #navigation li.selected a, div.ys_menu ul li.selected a:link, div.ys_menu ul li.selected a:visited, div.ys_nav ul li.selected a {
color: #333333;
}

/* Navigation:hover */
div.sys_navigation ul li a:hover, div#menu ul li a:hover, #navigation li a:hover, div.ys_menu ul a:hover, div.ys_nav ul li a:hover, div.ys_menu ul li a:hover {
color: #333333;
}


second group of over-rides

div#menu ul li a:hover{
background:none;
color:#000;
text-decoration:none;
}
div#menu ul li.selected a{
background:none;
color:#000;
text-decoration:none;
}


The first group will over-ride the second group, and this will refer back to the background urls for the coloured image backgrounds because there has been no statement for removal..

So this combined code may help but please remove both prior references to these:

/* Navigation:selected */
div.sys_navigation ul li.selected a, div#menu ul li.selected a, #navigation li.selected a, div.ys_menu ul li.selected a:link, div.ys_menu ul li.selected a:visited, div.ys_nav ul li.selected a {
background:none;
color: #333333;
}


/* Navigation:hover */
div.sys_navigation ul li a:hover, div#menu ul li a:hover, #navigation li a:hover, div.ys_menu ul a:hover, div.ys_nav ul li a:hover, div.ys_menu ul li a:hover {
background:none;
color: #333333;
}


Let me know
Photo of Karen

Karen

  • 100 Posts
  • 7 Reply Likes
I think I just figured out what caused this.

I started using the style designer which is in the tool for first time with this site....... this is the first time I have used it and it has some of the overrides and just happens to be the ones listed.....

The reason I say that is the code I sent is the only thing I entered in the CSS side. I may have to not use it if I want to override my navigation. I can't figure any other way other duplicate code would have gotten in there.

Once I get through with the site ....I will go back and play with those items.

Thank you so much for your help with this. I find sometimes you can look at something too long. I even have my son who writes CSS and javascript look at it. We deleted the code (all ) out of the CSS changes and then I looked at it and then wondered where the changes were.....well.....I just happened to look at the style designer and there it was ....excess code in there - so it was overriding whatever I put in CSS editor.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's a good point as you say it needs to be identified in the authors mind how these things work in reality. I think you can deactivate the style designer which will help. I'm pretty sure I have turned mine off.

I mentioned previously that you could create an image for your selected and hover states. The easiest way that I know to do this is with something like Photoshop or equivalent. Download the image referred to in the background statement and examine it's dimension properties. Then duplicate those dimensions and create a gradient of your own preference.

I suspect that you have image manipulation skills; if so it's easy. If this is unfamiliar then please let me know and I'll have a go at creating the images for you and send them back to you here or by email.
Photo of Karen

Karen

  • 100 Posts
  • 7 Reply Likes
I just want to say HOW MUCH I APPRECIATE the HELP. I considered moving my website to wordpress as one of my business partners is a web development company and I resell their websites, but told him that one of the reasons I didn't was because of the support - not only from the company but from all of the people on the forums. I am a marketing person with a computer science minor - so I wasn't willing to give up that much control because he locks down a lot of the widgets as he has hosting as well. I like that Yola is secure and I can get 85% of what I want ....and support from them and people like you is unbeatable.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I just examined the properties of the background image. It's 1 pixel wide and 38 pixels high.

Gop.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thanks Karen.