[Resolved] Transparent Menu with Elementor Header

[lionel]

Hi;

I designed a Header with Elementor for http://www.fastprintingpr.com and exported it to the Library. After that I created a Header in GP and placed the Elementor code in the Header Content Area, then in Advance Settings I set to Merge with site header and Place content behind header (sliders etc..) and saved and Updated the Headaer. Done so I went to my Index Page and in the Page Header I chose the one I had created but nothing happens at Front End except that the Logo and Menu is not showing.

What am I missing, or how can I do it? I am no coder.

Lionel

[Leo]

Hi there,

Sorry I’m not quite certain what the issue is here?

Keep in mind that WordPress ignores all metabox on index pages so the page header for index pages would have to be set in the global location: https://docs.generatepress.com/article/page-header-global-locations/

Let me know if this helps 🙂

[lionel]

Thanks Leo;

You do not know what the issue is here and I do not understand your answer. I just want to make a transparent menu in a header like the one in the attached image and explained what I did. Hope you can tell me how should it be done.

I set the header in Elementor and the Menu is the one in GP.

[Leo]

You can achieve that with this: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

and this: https://docs.generatepress.com/article/merging-header-navigation-content/

[lionel]

Hi Leo; I am pretty Sure that images attached says what I have done and the final result:

1. Elementor Library:
2.Page Header: http://www.fastprintingpr.com/wp-content/uploads/2018/02/Page-Header.png
3.Advanced Header’s Tab: http://www.fastprintingpr.com/wp-content/uploads/2018/02/Advanced-Page-Header-Tab.png
4.Applying Page Header: http://www.fastprintingpr.com/wp-content/uploads/2018/02/Applying-Page-Header.png
5.Fron End Final Result: http://www.fastprintingpr.com/wp-content/uploads/2018/02/Front-End.png

Can you tell me what am I missing?

[Leo]

Did you hide the page header/featured image here? https://docs.generatepress.com/article/disable-elements-overview/

[lionel]

Hi Leo. That was what I was missing or doing wrong. Thanks again

[Leo]

No problem!

[Michael]

I’m having a similar problem. I’m trying to display the navigation bar on top of the image (see linked image).

I created the navbar/header from within the “my templates” section of Elementor.

The background of the navbar/header is set to 40% opacity.

I tried disabling the “Featured Image/ Page Header” from within “Edit Page” area.

Any ideas what I’m missing?

Screenshot

[David]

Hi Michael,

I have yet to test out merging an elementor header with the pageheaders.
personally for what you are doing it would be easier to use the GP Navigation and GP Page Headers. To create the navigation would just require you adding a logo to the navigation bar in the customiser. The Give button could just be added as a menu item and styled like so:

https://generatepress.com/forums/topic/adding-a-button-to-menu-workaround/#post-228678

Then its just a case of creating a GP PageHeader and setting that to Merge with Site Header in the advanced tab. It also gives you a choice to change the navigation colors in the pageheader, in case you want the sticky navigation to keep the customiser colors.

Benefits are we can support fully =) and you get the advantages of a GP Page Headers, Sticky Nav and slideout menu if you wish.

[Michael]

Thanks David, I think I’ll try that method!

[David]

Your welcome Michael

[Author]

Posts