[Resolved] How to create color gradient for Primary and Secondary Menu

Home Forums Support How to create color gradient for Primary and Secondary Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1503287
    Chitika

    I am able to change the colors of the menu easily.
    But how to provide gradient colors for both primary and secondary navigation.

    #1503625
    David
    Staff
    Customer Support

    Hi there,

    you can use some CSS like this:

    .main-navigation {
        background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
    }
    .secondary-navigation {
        background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
    }

    You can use this site to generate the Gradient CSS:

    https://cssgradient.io

    #1519895
    Chitika

    Thanks @David. It worked on desktop sites.
    But on mobile or responsive theme, I don’t see the change.
    Why?

    #1520225
    David
    Staff
    Customer Support

    The Mobile navigation has got the gradient, do you want the drop down menu to also display the gradient ?

    If so you would use this as well:

    .main-navigation.toggled .main-nav>ul {
        /* Your gradient CSS here */
    }
    #1522147
    Chitika

    Probably the cache was stopping to see it on my end.
    Yes, I see it on another mobile. The mobile menus are also having color gradient.
    Thanks. Make it resolved.

    #1522616
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.