Support » Themes and Templates » styling responsive theme header menu

  • jimmythetulip

    (@jimmythetulip)


    Hi

    I am struggling to figure out how to style the header menu of my site.
    I want to accomplish the following solution.

    1. When an item in the menu is clicked / active its background color will change to an arbitrary color (eg. red, green, or blue).
    2. The hover effect on each menu item must follow same background color, as when the link was clicked.

    I was able to change the background color on the menu items using css and php, but I think its a rather dirty soloution, because I don’t use wordpress to achieve that.

    So how do I define and configure a header menu using wordpress, so I can accomplish the stated soloution? I guess I have to edit the header.php template file and stylesheet, correct?

Viewing 1 replies (of 1 total)
  • Adrian Houle

    (@adrian-houle)

    Hi. You are correct that this is dirty, but not for the reasons you assume. What you wan’t to do is create a child theme with an overwriting style sheet, see: https://codex.wordpress.org/Child_Themes
    You do this because any changes you make to the parent theme will be overwritten when that theme is updated.

    Alternatively there is probably a built in CSS customisation option in your theme menu, but making a child theme is a good learning investment.

    You should then get familiar with chrome developer console or firebug, this will let you inspect the elements of your webpage in order to choose the best CSS selectors as well as to see the existing styles, including the option to see current hover and focus effects. You can even try out little changes in the developer tool to see if they make an effect on your webpage.

    Then you just start adding to your child stylesheet, making the background colors what you want, the hover effects what you want, ect. Check out http://htmldog.com/guides/ if you need help with CSS.

    I know this is a lot, but once you become familiar with this you will be glad you put in the effort.

    Good luck,
    -Adrian

Viewing 1 replies (of 1 total)
  • The topic ‘styling responsive theme header menu’ is closed to new replies.