Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2988989
CSS for Header Builder Custom Menu
Closed

Comments

  • fuse2marketing started the conversation
    February 24, 2022 at 3:57am

    I want to change the color of each individual main menu word (Home, Practice Management, etc) using CSS. You helped me change the CSS for all other pages, but this page has a custom header I made using Header Builder. Can you tell me the CSS for the main menu?


    Here's what I used for the rest of the site: 

    This is for the menu name:

    #navigation.menu-item-padding ul.menu>li#menu-item-1016>a {
        color: #005566;
    }

    This is for the current menu name:

    #navigation.menu-item-padding .menu>li.current-menu-item.menu-item-1016>a {
        color: #111111;
     background-color: rgba(0,85,102,.25);
    }

    Thank you!

  •  2,610
    PenciDesign replied
    February 24, 2022 at 4:33am

    Hi,

    Please modify the CSS code like this:

    .navigation.menu-item-padding ul.menu>li#menu-item-1016>a {
        color: #005566;
    }
.navigation.menu-item-padding .menu>li.current-menu-item.menu-item-1016>a {
        color: #111111;
        background-color: rgba(0, 85, 102, .25);
    }

    Regards,
    PenciDesign.



  • fuse2marketing replied
    February 24, 2022 at 2:14pm

    The code you posted is the same as what I have. My current code works on my standard menu. I'm trying to modify a custom menu I made in Header Builder that only appears on one page: https://theprofitabledentist.com/swamped-by-ppos/

  •  2,610
    PenciDesign replied
    February 24, 2022 at 4:44pm

    Hi,

    Please try to use this CSS code:

    .pc-builder-element.pc-main-menu .navigation li.menu-item-1016>a {
        color: #005566;
    }
    .pc-builder-element.pc-main-menu .navigation li.current-menu-item.menu-item-1016>a {
        color: #111111;
        background-color: rgba(0, 85, 102, .25);
    }

    Regards,
    PenciDesign.