9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Problem with wordpress and CSS (nav_menus, current-menu-item)

by HenrikPoulsen
7 replies
  • WEB DESIGN
    • |
Hey all

I'm currently working on a website for my bookkeeping website. Here I am trying to make it so that the current-menu-item is a different color than the other menu items in the main menu.

I have enabled wp_nav_menus in the wordpress theme, this generates the following output for the current page

<div id="headmenu">
<div class="menu-header">
<ul id="menu-nav" class="menu">
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-23">
Here it is clear to see that the theme places the menu in id="headmenu". WP then creates "menu-header", "menu-nav" and "menu" and assigns a class "current-menu-item" to the current LI

So far so good. Now I wish to turn to the CSS. In the theme there is a load of settings for the menu, and a few for a:hover (I wish to use the ones for a:hover on the current-menu-item)

#headmenu {
font-family: verdana, arial, sans-serif;
font-size:16px;
width:775px;
letter-spacing:-1px;
font-weight:bold;
float:none;
margin:30px 0 0 0;
color:#fff;
overflow:hidden;
}

#headmenu a {
color:#000;
background:#fff;
padding:3px 10px 2px 10px;
margin:0 0 0 3px;
line-height:21px;

opacity: 0.8;filter:alpha(opacity=80);zoom:1;

-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;

-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
-khtml-border-radius-bottomleft:0px;
-khtml-border-radius-bottomright:0px;

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
}

#headmenu a:hover {text-decoration:none; color:#fff; background:#000;}
Can anyone help me out here? I have tried
#headmenu a .current-menu-item {text-decoration:none; color:#fff; background:#000;}
without any luck

Thanks
#css #navmenus #problem #wordpress
  • Profile picture of the author tarif
    Can you please provide your website link here?
    {{ DiscussionBoard.errors[6873008].message }}
    • Profile picture of the author HenrikPoulsen
      Originally Posted by tarif View Post

      Can you please provide your website link here?
      Sadly no, as it is only on my laptop at the moment
      {{ DiscussionBoard.errors[6873019].message }}
  • Profile picture of the author clickbump
    Hi Henrick, the problem with your CSS is that since WordPress assigns the .current-menu-item class to the li element, which contains the a element, your CSS needs to be rearranged a bit.

    Try this instead:

    Code:
    #headmenu .current-menu-item a {
text-decoration:none; 
color:#fff !important; 
background:#000 !important;
}

#headmenu .current-menu-item a:hover {
text-decoration:underline; 
color:#000 !important; 
background:#fff !important;
}
    What I've done there is to move the "a" element so that it follows the class attached to the li element.
    Signature
    {{ DiscussionBoard.errors[6873025].message }}
    • Profile picture of the author HenrikPoulsen
      Originally Posted by clickbump View Post

      Hi Henrick, the problem with your CSS is that since WordPress assigns the .current-menu-item class to the li element, which contains the a element, your CSS needs to be rearranged a bit.

      Try this instead:

      Code:
      #headmenu .current-menu-item a {
text-decoration:none; 
color:#fff !important; 
background:#000 !important;
}

#headmenu .current-menu-item a:hover {
text-decoration:underline; 
color:#000 !important; 
background:#fff !important;
}
      What I've done there is to move the "a" element so that it follows the class attached to the li element.
      Works like a charm.

      Thanks a million
      {{ DiscussionBoard.errors[6873053].message }}
  • Profile picture of the author HenrikPoulsen
    Site is online now BTW

    www.metabog.dk
    {{ DiscussionBoard.errors[6874169].message }}
  • Profile picture of the author PortHosts
    Looks good.
    {{ DiscussionBoard.errors[6874224].message }}
    • Profile picture of the author HenrikPoulsen
      Originally Posted by PortHosts View Post

      Looks good.
      Thanks

      need a bit of work on the copy and some graphics though.

      Just have to work a bit on my concepts first. But it's getting there. Nice and simple design thats for sure..
      {{ DiscussionBoard.errors[6874270].message }}

Trending Topics