Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WordPress menu styling troubles :(

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #194439
    johncove
    Participant

    I am struggling with some WordPress specific CSS syntax for the menu system and hoped someone helpful could help me :)

    If you navigate to:-

    http://smtdev.johncove.uk/solutions/video-walls/eyevis-omnishapes/

    Problem A:-

    I would like the parent menu item for each section when dropped down to be highlighted in the blue slate colour – currently the rendered page parent is highlighted, which works to a point.

    At the moment you will see the menu drops down to show the child items but the parent menu item is white – I can’t work out what the correct CSS is to style the parent menu items.

    Problem B:-

    Also when you click on a parent, which shows the child items, then click on the parent item again, the text is no longer white.

    A few problems here, and hope someone can help. I’ve been battling all day :( I’ve also looked here but can’t seem to find something relevant:-

    http://premium.wpmudev.org/blog/wordpress-menu-css/

    Is this a problem that can only be solved using JQuery?

    Thanks!

    #194442
    Paulie_D
    Moderator

    Firstly, when the sidebar options are ‘clicked/opened’ they get a class of active added

    <li class="page_item page-item-365 page_item_has_children active">
    

    but I cannot see that an active class has been defined.
    So, perhaps

    #nav_menu-2 a:hover { /* line 4975 */
      color: #FFFFFF !important;
      background: #5E9FC2;
    }
    

    could be:

    #nav_menu-2 > li.active,
    #nav_menu-2 a:hover { 
      color: #FFFFFF !important;
      background: #5E9FC2;
    }
    
    #194443
    johncove
    Participant

    Thanks :) I don’t see any change though :(

    #194451
    Paulie_D
    Moderator

    Ah…my error, I assumed that #nav-menu-2 was the parent menu.

    Perhaps,

    #menu-leftside li.active {
      color: #FFFFFF !important;
      background: #5E9FC2;
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.