Position the main navigation under the h1.page-title

Hi there,

You'll need to create a Block element - Page hero to display the title, then set it to Before header.

The setting is as below, set location depends on your needs.
https://www.screencast.com/t/L4O6iJ7Q6r

Block element documentation:
https://docs.generatepress.com/article/block-element-page-hero/
https://docs.generatepress.com/article/block-element-overview/

Let me know if this helps :)

Hello Ying,

No, this is not doing the trick for me.

The h1.page-title and the h1.entry-title lie within the #page - I want it to stay there.

How do I bring the main navigation menu into the #page, and position it under the h1.page-title / h1.entry-title?

I do not want to design a new element, I just want to reposition the main navigation menu (not the whole header) under the h1.page-title / h1.entry-title.

Thank you.

Kallad

Hi there,

what will happen on the Archive pages where there is no Entry Title ?

Hello David,

The page you are referring to ("Articles" page) is the page I have assigned as my default Blog page - you can ignore this page.

Thank you.

Kallad

Give this PHP Snippet a try:

add_action( 'wp','db_move_navigation_after_entry_header' );
function db_move_navigation_after_entry_header() {
    if ( is_singular() || is_front_page() ) {
        remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
        add_action( 'generate_after_entry_header', 'generate_add_navigation_after_header', 25 );
    } else {
        remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
        add_action( 'generate_archive_title', 'generate_add_navigation_after_header', 25 );
    }
}

Hello David,

No, that did not work either.

Before, I waste your time, maybe I should ask: "Is it possible to achieve what I am asking for?"

If not, I will need to work on another layout.

I added the PHP Snippet to the functions.php file in the child theme.
I disabled all elements, except Primary Navigation and Content Title, site-wide.
I removed the default blog page.

Thank you.

Kallad

I modified the snippet above - give that a try.
Note the Primary Navigation must be located Below Header.

Thank you David.

This is 100% sorted on the home page.

Can you help me to get this displayed correctly on all pages, including post and archive pages.

Kallad

Modified above - adjusted the rule for all singles and added one for everything else, although i am not sure how the archive will layout...

Okay, this is starting to look really good.

As you thought, it is now just the archive page that is not sorted out 100%.

I have updated my site layout, for you to take a look at.

Thank you.

Kallad

Made another tweak to the code above.

Hey David,

Thank you...this looks perfect. I really appreciate your help in getting this sorted out.

Must I open a new ticket for this: Because you have done a 'tailor-made' layout for me, I now need assistance with getting the mobile menu layout correct: I want the page-title / entry title to position on the left, and the hamburger menu next to it, on the right side.

Thank you.

Kallad

Tricky one - try this CSS:

@media(max-width: 768px) {
    /* make sapce for mobile toggle aside title */
    .entry-header {
        max-width: calc( 100% - 60px);
    }
    /* Align title left */
    h1.entry-title {
        text-align: left;
    }
    /* assign relative parent for positioning toggle */
    .site-main {
        position: relative;
    }
    .inside-navigation.grid-container {
        position: initial;
    }
    /* Posiion toggle */
    .menu-toggle {
        position: absolute;
        top: 0;
        right: 0;
    }
}

Thank you David.

Much appreciated.