[Resolved] Can anyone help me on this small issue?

Home Forums Support [Resolved] Can anyone help me on this small issue?

Home Forums Support Can anyone help me on this small issue?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1543559
    Stephen

    Hello, I am a beginner level developer, now we are open a BLACK FRIDAY sale.
    We want to add a button called “BLACK FRIDAY DEAL” and only change this button color to Red on main menu bar, Now I added the button, but don’t know how to change the color and to center its position. Is there anyone can help on this issue?
    Thanks in advance,

    Reference link https://tfwph.com/

    #1543795
    David
    Staff
    Customer Support

    Hi there,

    first off give that a menu item a CSS class of: deal-button
    This article explains how to add CSS classes to menu items:

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Now add this CSS:

    .deal-button button {
        background-color: #f00;
    }
    
    @media(min-width: 900px) {
        .main-navigation:not(.slideout-navigation) .main-nav {
            flex: 1;
        }
    
        .main-navigation:not(.slideout-navigation) .main-nav>ul {
            display: flex;
        }
    
        .deal-button {
            margin-right: auto;
            margin-left: auto;
            transform: translateX(64px);
        }
    }

    Alternatively you may want to consider using a Block Element to add a Black Friday Deal banner using the before_header hook. That will allow you to display it above the navigation on desktop and mobile.

    #1548193
    Stephen

    Yes, it is working now. Thank you very much!

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