WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make navigation buttons stick (9 posts)

  1. TomJohnson
    Member
    Posted 7 years ago #

    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.

  2. whooami
    Member
    Posted 7 years ago #

    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.

  3. TomJohnson
    Member
    Posted 7 years ago #

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

  4. whooami
    Member
    Posted 7 years ago #


  5. TomJohnson
    Member
    Posted 7 years ago #

    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?

  6. whooami
    Member
    Posted 7 years ago #

    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.

  7. TomJohnson
    Member
    Posted 7 years ago #

    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.

  8. whooami
    Member
    Posted 7 years ago #

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

  9. TomJohnson
    Member
    Posted 7 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic