[Resolved] Changing header size depending on page

[Marek]

Hey there,

Hope you are all well.

How can I change the size of a header for each page? For instance, on my homepage I would like to have the header nice and big, but on every other page I would like to change the height of the header and change the position of the logo.

The way it is done here is a good example. If you click on a link outside of the homepage the header collapses.
https://spreadprivacy.com

Is there a way to include the menu icon in the header like the website above does?

Thanks a bunch!

[David]

Hi there,

my thinking would be this:

1. Add a Logo to the Site Header as you would want it displayed for the internal ( not home ) pages.
2. Set the Customizer > Layout > Primary Navigation location to Below Header
3. Create a Header Element for your Front Page:
https://docs.generatepress.com/article/header-element-overview/

For its content you can include the heading and sub-heading.
Then go to the Site Header tab of the header element where you can select Merge with Content and change the Site Logo if you wish.

4. Now we need to position the Primary Nav below our Header Element by adding this PHP Snippet to our site:

add_action( 'after_setup_theme','craig_move_navigation' );
function craig_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
}

[James]

I was going to ask a very similar question, but have the header disappear on single post pages, leaving only the nav bar, or a Menu bar.

[Tom]

Hi James,

Any chance you can open a new topic? The solution to that should be quite easy with some CSS.

Thanks!

[James]

Will do, Tom.

[Marek]

Thanks David!

[David]

You’re welcome

[Author]

Posts