Support » Themes and Templates » How to make navigation buttons stick

  • Resolved TomJohnson

    (@tomjohnson)


    My top navigation bar has a problem: when you click a button, it doesn’t change states to show a different appearance. When you hover over the button, it turns white — this is good. But after it’s clicked, it should appear differently from the other buttons.

    My site is at http://stc-suncoast.org

    The style sheet for the “current” state is as follows:

    #stylefour ul li a.current{
    color:#B30000;
    background:#000 url(img/bgON.gif) no-repeat top right;
    }

    However, this doesn’t seem to work at all.

Viewing 8 replies - 1 through 8 (of 8 total)
  • whooami

    (@whooami)

    Member

    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?

    whooami

    (@whooami)

    Member

    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?

    whooami

    (@whooami)

    Member

    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(http://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.

    whooami

    (@whooami)

    Member

    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(http://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?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to make navigation buttons stick’ is closed to new replies.