[Resolved] Customize the Button on the Header (Primary Navigation)

Home Forums Support Customize the Button on the Header (Primary Navigation)

  • This topic has 7 replies, 3 voices, and was last updated 1 month ago by Leo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1415856
    Huseyin

    Hi GeneratePress Team,

    Need help on customizing the code for Button on the Header (Primary Navigation).

    So simply want the button to be with a white background with purple colour when hovered/clicked with current style purple background, white text & white border.

    https://ibb.co/JpXs0VJ

    #1415917
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            border: 3px solid #fff;
            background-color: #fff;
            color: #572794 !important;
            border-width: 2px;
            line-height: 40px;
            margin-right: 30px
        }
    
        .main-navigation .main-nav ul li.nav-button:hover a {
            background-color: unset;
            color: #fff !important;
        }
    }
    #1415969
    Huseyin

    Great thank you very much for the reply with the CSS,

    As you click on the button, it directs you to a page but the button is different with purple text & white border, how could we get it white background with purple text colour.

    and I’m wondering i have inputted nav-button hide-on-tablet hide-on-mobile on the CSS classes on menu section for Submit a resource button, so can we remove @media (min-width: 769px) code on the css code above?

    #1416335
    Leo
    Staff
    Customer Support

    Try adding this CSS as well:

    .main-navigation .main-nav ul li.nav-button[class*="current-menu-"]>a {
        color: #572794!important;
        background-color: #ffffff !important;
    }

    and I’m wondering i have inputted nav-button hide-on-tablet hide-on-mobile on the CSS classes on menu section for Submit a resource button, so can we remove @media (min-width: 769px) code on the css code above?

    Yup you could. My preference would be to keep it in for clarity but it’s up to you.

    #1416813
    Huseyin

    Thanks for reply Leo

    But want the current menu with a white background with purple text?

    *i tried it but couldn’t achieve it

    #1416888
    Leo
    Staff
    Customer Support
    #1416891
    Huseyin

    Thank you very very very much Leo & David for the help.

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