How to make navigation buttons stick

background:#000 url(img/bgON.gif) no-repeat top right;

I havent looked at your site, but at first glance I recommend using the full path to that image in your CSS.

I tried adding the full path, but it doesn’t fix anything. Any other suggestions?

Sorry about that — I had only put the path in for the troublesome tag. I inserted the full image path for each of the button images now.

I was thinking that perhaps if the fix wasn’t easy, I could look at a demo of a site where it actually does work?

no worries, I actually was looking at your site in your profile at first.. Ive looked and honestly I dont know.

The oain in the ass with troubleshooting background images (for me atleast) always stems from the fact that once you open the CSS in the firefox web dev extension, it removed all background images automatically.

One thing I did notice though, though changing it didnt fix it for me..

you are using this:

#stylefour ul li a.current{

and in fact, the whole name of the current class is :

current_page_item

I honestly dont know if that shorthand works or not.

also, this:

/*#stylefour ul li a#current{
color:#B30000;
background:#fff url(https://stc-suncoast.org/wp-content/themes/ygo-lonely/img/bgON.gif) no-repeat top right;
}*/

#stylefour ul li a#current {background: white; border-bottom: 1px solid white;}

the # is used for IDs not classes – which is what you are using, so a#current is wrong (im pretty sure) .. as its a class in your source NOT an id

Lastly, youre actually using 2 classes to style that, and yet I dont see page_item anywhere in your css.

Im just tossing all that out — no expectations on the outcome of changing any of that.

I appreciate your help taking a look at this. I’m going to play around with some of the things you pointed out. Again, thanks.

sure, im sorry i couldnt help more. Post back if you do figure out what it is.

I have it half way figured out now. All the buttons work except the home button.

In my header, here’s how the code looks:

<div id=”stylefour”>

• ” title=”” class=”current”>Home

<?php wp_list_pages(‘title_li&exclude=732,727,728,729,730,731,726,612,141,557,545,355,566,396,233,546,579,411,400,401,403,402,405,408,407,409,410,530,339,356,338,397,673,28,529,57,54,560,697,607,624,625,698,699,700,701,715,716,717,718,19,497,24,32,136,376,379,378,380,381,382,383,384,385,386,387,388,389,390,391,15,137,434’); ?>

</div>

In the style sheet, this is the code:

#stylefour ul li.current_page_item a {
color:#B30000;
background:#fff url(https://stc-suncoast.org/wp-content/themes/ygo-lonely/img/bgON.gif) no-repeat top right;
}

It was just a matter of putting the a on the right rather than the left. I looked at an andreas vikland theme and mimicked his style sheet in that specific menu area.

There’s only one problem: the home button doesn’t work. Do you have any thoughts on how to fix that?