[Support request] Custom header for an Element (layout type)

[Mike]

Hello,

I’m trying to make the following modifications to the header of an Element (layout) I created. The header for this element is the same as my default header except,

1) the color for the background of the header needs to be changed.
2) it should not contain a navigation menu
3) it should contain a different logo

To better explain how I want to transform my default header, please look at the header on my home page and compare it to the header on this site: https://www.nerdfitness.com/coaching-overview-page/

I’m pretty sure this can be done with CSS, but I can’t figure out how to do it. I tried to do the second modification by going to Appearance -> Elements -> Edit Elements -> Disable Elements, but no combinations worked for what I need. I was able to completely remove the header, but I need it there to hold my logo.

Thank you!

[Leo]

Hi there,

Not 100% sure what you are after but can you try this CSS first and see if we are heading in the right direction?

.home .main-navigation:not(.slideout-navigation) .main-nav {
    display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Mike]

Hi Leo, let me try to rephrase my question.

All I need is CSS code that will help me modify the header of a specific page on my site.

The modifications:

1) I need to change the background color of the header. The current color is black, but I would like to change it to something else.
2) I need to remove the menu from the header (Home, Weight Training, etc., as displayed on my site). The header of this specific page will not have a menu that links to other pages on the site.
3) I need to use a different logo in the header. This specific page is a “product page”, and the product has its own logo, which is different from the site logo.

These modifications are only for the header of the product page, which we can specify in the CSS code with the page ID.

I hope that makes sense.

[Leo]

1. This CSS should work:

body.page-id-xxx .main-navigation, .main-navigation ul ul {
    background-color: #fff;
}

2. My CSS in the previous reply should work:
https://generatepress.com/forums/topic/custom-header-for-an-element-layout-type/#post-1316155

Just replace .home with body.page-id-xxx

3. You’d need the PHP filter:
https://docs.generatepress.com/article/generate_logo/

[Author]

Posts