[Support request] Add background gradient including primary navigation and body background.

[Naman]

Hi, I would like to add background gradient including primary navigation and body background.

Example in below section.

It’s not based on GP, but I tried it using CSS, but I didn’t get it. Kindly help me. Thanks!

[Ying]

Hi Naman,

1. You need to create a header element to merge the header with the page hero section.
https://docs.generatepress.com/article/header-element-overview/
Here’s a video for your reference: https://youtu.be/TP8mgBQTgGg

2. Then you can apply the CSS to this selector: .header-wrap.

[Naman]

Kindly elaborate with steps how can I do this?

[David]

Hi there,

the main thing is to merge the site header with the page content.

1. Go to Appearance > GeneratePress and Activate the Elements Module
2. Go to Appearance > Elements and New > Header Element.
2.1. On the Site Header tab in the element, apply the settings highlighted in blue in the attached document image:

https://docs.generatepress.com/article/transparent-header-and-navigation/

2.2 Set the elements Display Rules > Location to Entire Site or add locations specfic to the pages you want to apply this eg. Homepage

3. Publish.

[Author]

Posts