[Resolved] Creating specific header

[Max]

Dear support team,

I purchased GP Premium a while ago and am in the middle of building my webpage (mostly in combination with Elementor). I have been using WP for quite a while but am quite inexperienced when it comes to programming/page building, well especially styling or coding. This is my first forum entry here but I believe it will not be my last.

As for the subject matter: I would like to create a header like this one (pay no attention to the rest of the theme): https://demo.inkhive.com/amora-pro/

The important parts are the two semi-transparent bars (top and bottom), the background image (a bit larger/higher than the one of the theme) which should feature parallax scrolling and the site’s title which I would like to place either in a central position (like in the header example) or into the top bar (centered). For now I would like to add one global header to the entire webpage (I believe the “Global Locations” function in the Header Section of GP makes the latter requirement very easy).

I honestly do not know whether it is asking too much to enquire about a solution on here (or how much of an effort it would be to implement it) but it would be lovely if someone were to point me into the correct direction. The plan is to create a global header and to later on be able to simply change the image depending on the specific page/category at hand.

For now my webpage is private and I have simply experimented a bit with ELementor so there is not much to see. But if it is necessary I can provide access to a moderator from the forum/programmer from GP.

Thanks for your attention and best regards,

Max

[Leo]

Hi there,

Try the following steps to create a header exactly like that.

1. Set primary navigation to Above Header:
https://docs.generatepress.com/article/navigation-location/

2. Create a page hero and follow the steps to merge:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/transparent-header-and-navigation/

3. Set secondary navigation to below header:
https://docs.generatepress.com/article/secondary-navigation-location/

4. Add this PHP snippet to move it under page hero:

add_action( 'after_setup_theme','lh_move_secondary_navigation' );
function lh_move_secondary_navigation() {
    remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
    add_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 15 );
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

5. Add this CSS to merge with the page hero:

.secondary-navigation {
    margin-top: -60px /* Adjust this number to match the height of the navigation */
}

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

6. Make sure the secondary navigation has a transparent color:
https://docs.generatepress.com/article/colors-overview/

Let me know 🙂

[Max]

Thanks Leo – I will try that and get back to you ^^

[Max]

Hi again,

I’m afraid that solution did not do the trick. I followed the steps you described but in the end the whole header section became scrambled, the hero image did not get displayed nor did the mentioned semi-transparent bars show up and the title of the site and the subtitle were placed over the first section of any page:

I tried to add an image here but it did not work – here is the link to the screenshot I made:

https://photoland.io/i/lgM1s

Do you have an idea as to what the problem might be?

[Leo]

It should definitely as I actually tested the method 🙂

I’m not able to view your site using the link you provided in the original topic as it requires password and login.

Can you unlock it so I can see?

Thanks!

[Max]

That is reassuring to know – I really appreciate the effort!
I unlocked the page so you should be able to see it.
Let me know if you need anything else ^^

[Leo]

So is there an image added for that page hero still?

If so make sure there is <!--HTML comment--> added in the page hero content part if you don’t have other contents added in there for the image to show.

Then you can use the top and bottom padding to control the size of the image.

[Max]

Yes I had already added an image (as a featured image).
I added the line of code to the page hero content part (above the tabs “page hero”, “page header” etc.) and added some padding (bottom 200 px and top 200 px). Now the image is visible but as you can see the menu basically looks the same as before – it just includes a transparent background and is now located at the top.
The question is: How do we get the menu to appear at the bottom of the image in front of a semi-transparent bar while there is another semi-transparent bar lying on top of the image like in the example header I mentioned?

[Leo]

Looks like we are getting closer.

The top menu color can be changed within the page hero:
https://docs.generatepress.com/article/header-element-overview/#site-header

As for the bottom menu, I’m currently not seeing the secondary navigation at all.

Can you make sure you’ve done steps 3-6? All steps above are needed.

[Max]

Ok one mistake I made: I set the background to full transparency. Second one: I didn’t have the secondary menu enabled. Other than that I am sure that I have completed all of the steps you had mentioned.

Now, I tried disabling the primary menu (currently at the top of the page) but that did not work out – instead the semi-transparent bar just became larger and the menu items became sort of scrambled (thus widening the bar). So I enabled it again. This is what it looks like now (see page).

The CSS I added with Simple CSS. Maybe there is an issue with the specific features within the hero/header tab? Although I currently don’t see where this might be the case.

[Leo]

I’m not sure what isn’t working currently? It looks basically like the example you’ve shown:
https://www.screencast.com/t/XVyNVXgEJEsx
https://www.screencast.com/t/WNXytFoO1

[Max]

All righty – maybe there was a misunderstanding:

While the bars now look exactly the same way and the menu is underneath the hero, I still have the issue of two menus being enabled. Basically I want the top bar to be empty of any content (or perhaps show social icons at a later point but that is not important at the moment). If I disable the primary navigation, the top bar looks like this (see page)

[Leo]

Sorry not sure if I understand.

Do you simply want a semi-transparent bar at the top of the hero without any content?

If so we need to go about it using a different method as you cannot have a primary navigation without any menu items in it.

So yes it is kind of important to decide what you want to add in that bar.

I suggested the primary navigation way to achieve the example you linked.

Let me know 🙂

[Max]

Yes you are correct: The original idea was to just have a semi-transparent bar at the top. Sorry about not specifically clarifying that at the beginning. Your method is also very useful for future implementation though but for now the transparent bars, the background image (with parallex scrolling) and the lower menu are what I am looking for.

At this point I want to thank you again for the time you invest here – that is far from self-evident!

A quick question regarding your suggestion before moving on: Would it be possible to simply add social icons at the top bar using your method?

[Leo]

Untested with this but I believe you can use the top bar widget area to achieve the semi-transparent bar and social icons.

I think you will only need to use primary navigation if you want a navigation search in there 🙂

[Author]

Posts