[Support request] Header will not display correctly/ Not responsive

[Marike]

Ive been struggling with this problem for some time now. The header of the website will not display correctly. Im using the header option from the elements menu. The header image seems to bee displaying its true resolution. I have been able to get a full hd picture working, but the site menu is displaying right acress the header instead of below the header as intended.

what i would like is the header displaying correctly, responsive and the menu behaving as it should.

I would really like to resolve this issue as i am building this website for a client and the launchdate has already been delayed due to this issue. Thanks in advance!

[David]

Hi there,

you will need to do the following:

1. In Customizer > Layout > Primary Navigation set the Location to After Header
2. add the following PHP Snippet to your 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 );
}

This article explains how to add PHP:
https://docs.generatepress.com/article/adding-php/

Please pass this response on to your developer.

[Marike]

Hi, the menu is now working. But the header is still only displaying correctly when using a 1920×1080 picture, which is quite large. The header size i would like to use has a height about half this size, say 1920x540px .

How can i make it so that the header is displaying the whole picture instead of chopping it in half like its doing now? Thanks in advance!

[Leo]

How can i make it so that the header is displaying the whole picture instead of chopping it in half like its doing now?

Which page can I see this issue?

[Marike]

Hi Leo,

this is the link:
https://groendoencommunicatie.nl/?page_id=14

Thanks in advance!

[David]

In the Header Element.
Change the Top Padding to 24% instead of 500px.
And uncheck the Full Screen option.

[Author]

Posts