Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to do this at the top of the site

  • <– Please check this.
    <– Site shown in screenshot

    I’ll give you the login information, so please show me a screenshot or video of how to do it.

  • Hi there,

    This video should help:

    Let us know when the top bar is completed and we will provide the CSS to make it sticky.

    Let me know 🙂

  • thank you. Thanks I added it. But I think there’s only so much I can do. I want everything to be the same as in the screenshot shown earlier, including font size, color, button size, container size, and gradient effect. Go directly to my site and tell me what to do with screenshots or videos.

  • Hi there,

    I have inspected the design that you want to replicate and gathered its element properties and values. I hope this information can help you in designing it.

    Container height: 48px
    Font size: 15px
    Button color: #D9349F
    Button size: 109.11px x 34px

    As for the gradient effect, I cannot provide the exact value, but you can generate one here:

  • <– Thank you. But I’m not sure how to apply it. You can go here yourself and let us know with screenshots or videos.

  • I have made some modifications to your Top Bar element. All that’s left for you to do now is add the gradient background color under the color setting. Refer to my reply above for the gradient color generator.

    This is as far as we can help. 🙂

  • thank you. But I wish this part would follow me when I scroll down.

  • To make it sticky: {
        position: sticky;
        top: 0;
        z-index: 999;
  • g <– Thank you. But this part appears when scrolling, so I don’t want this part to follow when scrolling. Please tell me what to do.

  • Turn off the sticky navigation in Customize > Layout > Sticky Navigation

  • thank you. It’s resolved.

  • You’re welcome, glad to be of help.

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