[Resolved] Creating Custom Header + Removing Default Header

[Heather]

Hello,

I am in the process of migrating an existing blog on a website over to GP, and the website’s navigation is pretty in depth so I need to re-create it in GP.
I can create it using hooks, but the main issue is that the default header is always present – I tried making it all transparent and that didn’t work, and I didn’t see anywhere a way to hide it completely.

I also tried placing the hook inside the navigation, but unless I position:absolute it (which is a huge headache when making it responsive) I can’t fully hide the default nav behind the custom one.

How can I go about this? I basically just want to use a hook to make a custom nav and have that exist on all pages, while the default nav is deleted. I don’t just want to display:none it as that’s not really accessible/can create issues.

Thanks

[Leo]

Hi there,

To hide the default header, simply create a hook element like this:
https://www.screencast.com/t/bUqVLzMJc5
https://docs.generatepress.com/article/hooks-element-overview/

To hide the navigation, select No Navigation in the customizer:
https://docs.generatepress.com/article/navigation-location/

Let me know if this helps 🙂

[Heather]

Hi,

It does not seem like I have the option to do “no navigation”/ don’t have the navigation location option at all. See attached for all the options when I go to customize > appearance > layout > primary navigation.

Am I missing a checkbox somewhere else that will enable this feature for me?

[Leo]

That’s weird. I’ve actually never seen this before.

That option is actually included in the free theme and it’s located under alignment:
https://www.screencast.com/t/1jVIUO4z

Can you disable all plugins and make sure there isn’t a weird plugin conflict somewhere?

Let me know 🙂

[Heather]

I’m literally only running GP Premium, PageSpeed Ninja, WPForms Lite, and Yoast SEO for plugins, so nothing that would affect design/layout/etc. However, I did disable them and it still did not show up.

Any ideas? Is this a newer feature? I’m running GP 2.3.2, GP Premium plugin 1.8.3 and WordPress 5.2.2

[Leo]

That is very strange. This is one of the oldest features.

Have you modify the theme file in any ways or added any custom functions at all?

If not any chance you can re-install the theme and see if this somehow fixes it?

You won’t lose the customizations 🙂

[Heather]

But if I remove the theme and re-install it, won’t I lose all of the elements/hooks/custom CSS I did?

[Leo]

As long as you didn’t modify the theme’s core files, all the changes will be saved.

[Heather]

Ok, I will try it.

I am also running into an issue with my JS scripts not running/even registering in the code. I am mostly using hooks, is there an issue with having script tags in a hook? For this nav, there is a hamburger menu transition that needs to activate when the burger menu is clicked, but none of the scripts are running.

Any suggestions?

[Leo]

Actually the navigation location option is hidden if you have the use navigation as header activated:
https://docs.generatepress.com/article/navigation-as-a-header/

I think that is likely the issue.

Please open a new topic for the separate issue.

Thanks!

[Heather]

Thank you, that worked!

The only issue is now it seems like the header itself is getting pushed down by a default div with the classes of “inside-header grid-container grid-parent”. So I’m getting a bit of the background as well as the site title and logo. Even when I remove all of then it is still showing white space. Do you know where I can deactivate this so that my header hook reaches the top of the page. I’ve also made that hook a header, not before/after the header or logo or anything. I’ve attached a photo, I’m trying to get rid of everything above that purple gradient background.

[Leo]

Just to make sure, you are wanting to remove this part all together?
https://www.screencast.com/t/Sjr5sXey1

[Heather]

Exactly. So that burger menu and icon/img are part of my custom nav and they have a z-index of like 300 and position absolutely so it’s not actually interfering with the header/pushing anything down. If I display none that specific div I mentioned it’s fine but I would like to avoid that.

[Leo]

Try creating a hook element like this:
https://www.screencast.com/t/vL72mKYv98ov

[Heather]

That did it! Thank you!

Not sure if this is part of the same issue, but I am also getting this nav id=”generate-slideout-menu” which also seems to be a default nav/something with the theme, and it is hiding some of my nav as it’s z-index is 100001. Is there somewhere I can go to disable this? See attached

[Author]

Posts