Building headers and footers

[Lars]

Hi,

My current header consists of two navigation menus (one top and one main menu) and I have a more extensive section with 4 different columns, a couple of call to actions buttons, etc.

Everything is currently built with Elementor Pro just because of the ease of use. But I aim to transition away from Elementor as it’s full of bloat and harms the page speed.

Can you point me in the direction of some good tutorials on how to recreate the header section and footer section with GeneratePress?

I assume that the header should be the easiest to recreate?

As I’m mere drag & dropper should I wait with the footer section until you launch your new update?

I want to get started on this so thanks for any advice that can help me speed up the process!

Kind regards
Lars

[David]

Hi there,

1. Use the Secondary Navigation for your top menu by setting its location to Above Header and make it full width:
https://docs.generatepress.com/article/secondary-navigation-layout-overview/

2. Primary Navigation – go to Customizer > Layout > Header and check Navigation as Header.
This will add the Logo from Customizer > Site Identity inside the Primary Nav.

Note: In Customizer > Colors and Customizer > Typography you will find specific controls for the Primary and Secondary Nav.

2.1 Enable Customizer > Layout > Sticky Navigation.

2.2 To add the Drop shadow to the nav use this CSS:

.main-navigation .inside-navigation {
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
}

2.3 To add some cool menu hover styles see this:

https://docs.generatepress.com/article/adding-menu-hover-animation/

3. For the footer – i would upgrade to the GP Premium 1.11 and install GenerateBlocks.
Then its a case of enabling Elements in Dashboard > Appearance > Elements.
Appearance > Elements –> New Block Element

Now you can create that footer using the GB Container, Grid, Headline and Buttons blocks.
Nothing too complicated 🙂 Happy to help there if you get stuck.
For an insight to the blocks read here:

https://docs.generateblocks.com

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

[Lars]

Thanks for great advice and support! I will get started on this.

[David]

Let us know how you get on 🙂

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

[Author]

Posts