[Support request] Customize color of item menu

Home Forums Support [Support request] Customize color of item menu

Home Forums Support Customize color of item menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #742543
    David Rubio

    I would like to know if i can customize the background color of an item menu.

    #742587
    David
    Staff
    Customer Support

    Hi there,

    this article explains how to make a menu item look like a button, it includes how to add a class to the menu item, and then add some CSS to style it:

    https://docs.generatepress.com/article/adding-buttons-navigation/

    Let me know if you need a hand with the CSS

    #742646
    David Rubio

    Could you give me instructions step by step? This is my first time with WP and I dont know how to do it myself ๐Ÿ™

    #742659
    David
    Staff
    Customer Support

    No problems. So to be clear, you want to color a single menu item background color? So it will be different to the rest of the menu items? Let me know

    #742661
    David Rubio

    Yes, all items with the original background color, and the last coloured in red for example (rest in black)

    #742785
    David
    Staff
    Customer Support

    OK
    1. Dashboard > Appearance > Menus
    Click Screen Options top right of window. Check the CSS Classes. Close the options.

    2. Edit the menu, select the item you want to change color.
    In the CSS Classes field add: custom-color

    3. Customizer > Additional CSS add this code and change the hex codes for your colors.

    .main-navigation .main-nav ul li.custom-color a {
        background-color: #ffffff;
        color: #000000;
    }

    4. To add a hover color add this additional code and again change the hex codes:

    .main-navigation .main-nav ul li.custom-color:hover a {
        background-color: #ffffff;
        color: #000000;
    }
    #742806
    David Rubio

    Great job man!!

    #742853
    David
    Staff
    Customer Support

    Glad to be of help ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.