Custom styles not applying to menu items

  • natepelzel

    (@natepelzel)


    11 years ago

    Here is the site I’m working on:

    https://lovely-ashes.com/

    I am using Wootheme’s free theme “Bueno” with a child theme.

    My end goal is to make the border color underneath the primary menu items different when you hover over them.

    here is how the html for that menu reads after the php is processed:

    <ul id="menu-main" class="menu"><li id="menu-item-163" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163 about"><a href="https://lovely-ashes.com/about/">About</a></li>
<li id="menu-item-159" class="heartnav menu-item menu-item-type-taxonomy menu-item-object-category menu-item-159 heart"><a href="https://lovely-ashes.com/category/heart/">Heart</a></li></ul>

    There are a few more li’s but I kept them out in the interest of not cluttering the post.

    I have tried all of the following for the css:

    #pagenav #menu-main #menu-item-159 a:hover{ border-color: #9d3359; }
#pagenav #menu-main #menu-item-161 a:hover{ border-color: #3a697d; }
#pagenav #menu-main #menu-item-160 a:hover{ border-color: #d6da6b; }

    and

    #pagenav #menu-main .heartnav a:hover{ border-color: #9d3359; }
#pagenav #menu-main .homenav a:hover{ border-color: #3a697d; }
#pagenav #menu-main .handsnav a:hover{ border-color: #d6da6b; }

    and

    #pagenav #menu-main .menu-item-159 a:hover{ border-color: #9d3359; }
#pagenav #menu-main .menu-item-161 a:hover{ border-color: #3a697d; }
#pagenav #menu-main .menu-item-160 a:hover{ border-color: #d6da6b; }

    None of them seem to work. I’m pretty comfortable troubleshooting using web inspector and whatnot. None of the styles ever show up in the inspector (not even as inactive), which is making this hard for me to troubleshoot.

    I’ve even changed the colors the way I want them using the inspector stylesheet, and copied the styles and pasted them in my style.css, and they still didn’t show up.

    If you look in my style.css, there’s a style I have that’s commented out:
    #pagenav #menu-main li a:hover{ border-color: #484848; }

    When it’s active, it works fine. So either I’m missing a typo somewhere, or there’s an issue with the id’s and classes in my nav menu.

    this is the php used to call the nav menu:

    if ( function_exists('has_nav_menu') && has_nav_menu('primary-menu') ) {
wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => 'ul', 'theme_location' => 'primary-menu' ) );
}

    Any ideas what would cause this? I’ve done quite a bit of searching to no avail. Really appreciate any hints or insight you can offer.

Viewing 4 replies - 1 through 4 (of 4 total)
  • stephencottontail

    (@stephencottontail)

    All of those should work. Where are you adding these CSS rules? Also, there may be a caching issue here, too. Are you or your host using any caching plugins?

    Thread Starter natepelzel

    (@natepelzel)

    Thanks for the quick reply!

    I did check for caching plugins. I don’t have any installed. Also emptied my browser’s cache to be safe. Still no dice.

    I’m putting the rules in my child theme’s style.css. I have other rules in that same stylesheet that work fine.

    The strange thing is, when I look at the “sources” list in the web inspector, it shows my style.css document, and when I open it from there, it shows all the rules I mentioned above, so the browser is definitely seeing the rules, it just seems like it’s not applying them for some reason.

    stephencottontail

    (@stephencottontail)

    Aha. Looks like a malformed comment issue. You can’t use // here's a comment in CSS(*), you must use /* here's a comment */.

    (*) Well, you can if you’re using a preprocessor, but that’s a different issue.

    Thread Starter natepelzel

    (@natepelzel)

    brilliant. typo it is. Thanks for that callout

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom styles not applying to menu items’ is closed to new replies.