current_page_item works but not on home page.

  • Resolved jalacom

    (@jalacom)


    12 years, 8 months ago

    Hi,
    I’m in the process of building a template and using some css tabs for my site navigation. I’m trying to get my homepage to use the .current_page_item class so it appears that the “home” nav tab is on top as the selected tab(of course). It works fine when you click a navigation link and go to that page (even on the homepage). However when i first load the main index page it does not.

    This is the site address(where it doesn’t work):
    https://givethemsomethingbetter.com/gtsb/

    When you click on “home” it goes to this address (where .current_page_item class works correctly):
    https://givethemsomethingbetter.com/gtsb/?page_id=2

    I’m lost trying to figure out how to get it to work.
    This is how I’ve got my code set up so far:

    The HTML and PHP include:

    <ul id="nav">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>

    The CSS (would also like to know if I can make it function without having to use the !important declaration):

    ul#nav li.current_page_item a {

        background-color: #fff !important;
	color: #CA3A44 !important;
	border-bottom: solid 2px #fff !important;
}

    Let me know if I’ve left out any pertinent information. Thanks so much in advance for the time and help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter jalacom

    (@jalacom)

    Well no replies so far. I just went in and added this to my css:

    ul#nav li.current_page_parent a {
	background: white !important;
	color: #CA3A44 !important;;
	border-bottom: solid 2px #fff !important;;
}

    using .current_page_parent seemed to work. I would still like to know if there’s a way to do this without using important!

    ul#nav li.current_page_item a {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    color: #CA3A44;
}

    works just fine for me using Firebug.

    Thread Starter jalacom

    (@jalacom)

    Good point, thanks. I had a friend helping me out, we started with the !important tag. Apparently I thought i had tried it without them. But i’ve removed them and they work fine.

    Try using Firefox with the Firebug add-on for this kind of CSS work. It makes it so much easier to troubleshoot problems.
    https://getfirebug.com/

    Thread Starter jalacom

    (@jalacom)

    I have Firebug installed, I guess I just didn’t know how to alter the css with it.
    I’ve been using the developer toolbar in firefox as well along with developer tools in Safari and Chrome.

    You don’t use Firebug to change your CSS. You use it to identify the CSS you need to change and play with a few (temporary) CSS changes. Then, you edit the stylesheet manually. It’s by far the best dev tool out there for this kind of work. I use the web dev toolbar too but not for this kind of “pinpoint the CSS changes” work. That’s always done with Firebug & I reckon it’s cut my development time down by 50% at least. It really is well worth getting used to it.

    Thread Starter jalacom

    (@jalacom)

    Esmi,
    I realize you don’t make permanent changes to your CSS file using Firebug. I was saying I did not know how to use the feature to “play” with the CSS. (granted I do now)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘current_page_item works but not on home page.’ is closed to new replies.