[Support request] How to customize the menu bar

[Cyrus]

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

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

[Ying]

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);
}

[Cyrus]

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.
Cheers

[Ying]

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;
}

[Cyrus]

Hi,

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

[Ying]

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.

[Author]

Posts