Colors & Navigation

  • Author
  • #2790


    Hello –

    I am newer to WordPress templates and looking for a little direction on a couple CSS items. I would like to make the hover state on the navigation a color our client has in his logo and theme. I would generally like to add color throughout text in the website if possible. How would I go about doing that?

    Also the Home Page is coming up in the navigation. Is there a way to hide that or if it has to be there at least put it first?




    Puro Support

    Hi Kelsey

    Thanks for reaching out.

    Menu Colours

    If you’re making use of Ultra Premium, head over to Appearance > Customize > Theme Design > Main Menu to edit the menu colours:

    Main Menu

    If you’re using Ultra Free you can install a Custom CSS plugin like Simple Custom CSS and edit the menu colours by adding the following rules and editing them:

    /* Main Menu */
    .main-navigation ul li:hover > a {
      color: #0896fe;
    .main-navigation ul ul {
      border-top: 3px solid #0896fe;
    .main-navigation ul ul li:hover > a {
      background: #0896fe;
    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
      color: #0896fe;
    .main-navigation div > ul > li > a:hover {
      border-bottom: 3px solid #0896fe;
    .main-navigation .menu-search .search-icon:hover:before {
      color: #0896fe;
    .main-navigation .menu-search .searchform input[name=s] {
      border-top: 3px solid #0896fe;
    .main-navigation .menu a:hover:before {
      color: #0896fe;

    Change #0896fe as required.

    Custom Menu

    You can create a custom menu from Appearance > Menus. Once created, assign your menu to the theme’s primary menu location.


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Scroll to top