[Support request] How to customize the menu bar

Home Forums Support [Support request] How to customize the menu bar

Home Forums Support How to customize the menu bar

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1668359

    Hi GeneratePress support team,

    We’re used to Salient theme and others from EnvatoMarket who comes as a bundle with all the toolbox to fully customize the most used part of the website, such as the menu bar.

    Here we had difficulty to find the sticky menu, and we can’t find the customization options. How can you display a color/image behind the menu, to make it like it’s separated from the rest of the page?

    As an example, you can see this website: bahai.org

    Goal we try to achieve

    For now, all we got from the options we found is a weird sticky menu, that in fact generates a second menu which hides the original one. Our test website is sent in private.

    Thanks in advance for your help

    Customer Support

    Hi Cyrus,

    Could you disable the sticky navigation first? So I’ll have a better look into the code.

    For adding background image, you could try this CSS:

    body .header-wrap .site-header {
        background-image: url(image-url-here);

    Hi Ying,

    Thank you for your quick answer. I just deactivated the sticky menu.

    However, is there any other option instead of using custom CSS? Not possible through a sort of UI? Most Theme have this kind of feature.

    Also, what about if we just want a color with some transparency instead of an image?

    Again, thanks for your reactivity.

    Customer Support

    Thanks for reminding, oh yes, you can set background image in Customizer > Background Images > Header.

    Make sure the Backgrounds module has been activated at Appearance > Generatepress > modules.

    For semi-transparent color you can set it at customizer > colors > Header.

    For sticky navigation try this CSS:

    body .header-wrap {
        position: sticky;
        top: 0;


    I can’t change the menu background color. Check my screenshot

    Customer Support

    The color of the header is from the body background color since your header is now transplant.

    You could change the color in customizer > colors > body > Background Color.

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