Custom css – navigation menu in skylark theme

  • Author
  • #1069006



    I’m currently playing around with skylark theme and custom css. Have a look at the skylark demo here and observe the navigation bar & parent/child page behaviour in the menu.

    In my variant of the theme, the links in the nav bar are black font – as I changed the background color to a lighter blue, the font changed to black automatically. That’s fine.

    In my variant, a current parent page in the nav bar has white font – to highlight that this page is currently viewed. However, if the parent page has child pages, they appear in white font as well even though none is selected yet. When you hover over them, they still remain white. When you select one child page, it also remains white – same as all the child pages under the current parent.

    What I would like is the sub-menu of parent pages to be in black font even though the parent page is currently viewed. A child in parent page (an item in sub-menu) would then be in white font only if a) you hover over it or b) if the child page is currently viewed.

    The CSS contains a myriad of selectors, it is often difficult to figure out what selector(s) to target to do specific actions. I’m sure this is fairly a simple task, but I have failed to isolate the selector that could be targeted here.

    Many thanks for your help.

    The blog I need help with is


    I don’t think this one was particularly simple. :) Give this example a try:

    .main-navigation li.current-menu-item ul a {
    	color: #000;

The topic ‘Custom css – navigation menu in skylark theme’ is closed to new replies.