Navigation location desktop vs mobile.

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Sorry, it's a localhost dev site and we don't have a tunnel set up.

However, we're literally just playing around with the blank theme and dummy text though - nothing specific, so there's nothing customised.

We like this setting for desktop:
https://snipboard.io/RH4oiw.jpg

and this setting for mobile:
https://snipboard.io/4b1eSt.jpg

is it possible to use CSS / media query etc so the navigation menu is below the header (screen1) on desktop and above the header (screen2) on mobile?

Hmm little bit tricky but let's try this:

1. Create a hook element called Header nav wrapper opening with the following content:
<div class="header-nav-wrapper">

Choose generate_before_header hook and display to the entire site.

Reference: https://www.screencast.com/t/GswUOCccTF3

2. Create a second hook element called Header nav wrapper closing with the following content:
</div>

Choose generate_after_navigation hook and display to the entire site.

Reference: https://www.screencast.com/t/38T5r9Ylwlf

3. Add this CSS:

@media (max-width: 768px) {
    .header-nav-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
}

I tested this and it works.

If it doesn't work for you then I'll need to see the live site with the solution applied to provide further instructions.

Let me know :)

We tried that but unfortunately it did not alter the position of the main navigation, which remains below the header on both desktop and mobile. I've attached some screenshots to illustrate what we're trying to achieve, in case there's been a misunderstanding. (In private).

Hi there,

based on Leos instructions you will create 2 x Hook Elements:

Hook #1
Add this to the content: <div class="header-nav-wrapper">
Select the Hook: generate_before_header
Set the Priority to: 1

Hook #2
Content: </div>
Select the Hook: generate_after_header
Set the Priority to: 40

Then add his CSS:

@media (max-width: 768px) {
    .header-nav-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }
}