[Resolved] 3rd Navigation Below Header.

[Atmostfear]

Dear colleagues,

We are trying to add a third-level navigation bar to our site as shown below, Store menu as a reference.

We have searched your forum and found some posts regarding this however, seem outdated.

What we have done so far was to add to our Child Theme’s functions.php the following:

// Action to enable third menu
add_action( 'init', function() {
    register_nav_menu( 'third-menu', __( 'Third Menu' ) );
} );

And created a Hook as:

<div class="third-navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'third_menu' ) ); ?>
</div>

And then changed to the following:

<div id="third-navigation" class="third-navigation">
	<div class="inside-navigation grid-container grid-parent">
		<div class="main-nav">
			<ul id="menu-bar" class=" third-menu sf-menu">
		<?php wp_nav_menu( array( 'theme_location' => 'third-menu' ) ); ?>				
			</ul>
		</div>
	</div>    
</div>

The above to see if we manage to duplicate the look of the Secondary Navigation with some changes (URL shared privately)

It appears that to load it beneath the Header, the after_header hook no longer functions.

Our menu has a main category, and associated subcategories, meaning it has Menu Items, with Sub Menu Items to open below, which we would like to see it working.

Thank you in advance.

[Tom]

Hi there,

Sorry for the delay in responding!

I’m looking at the staging site right now and it looks great – were you able to sort this out?

I’m seeing the third navigation displaying after the header, the same as your current site.

Is there something about it that’s not functioning correctly?

Let us know 🙂

[Atmostfear]

Hello Tom,

Yes, we managed to do what we planned however there is an issue that appeared after that we are trying to figure why the blocks are going on the right off-screen.

If you could take a look and point us in the right direction it would be highly appreciated.

URL shared privately.

Thank you in advance.

[Elvin]

Hi there,

While I see some blocks with with a oversized fonts for mobile on the edge of the screen, I’m not sure I spotted anything in particular moving off-screen to the right. (some buttons are misaligned though.)

Can you share some screenshots of the particular blocks that are going off-screen?

[Atmostfear]

Hello Elin,

At our end it shows this way, even thus it is set for 1320px wide on Customiser, the blocks go off-screen: Screenshot

Regarding the responsive mode, you are right, however, we are yet to get to that part since we are structuring everything first, and once done, then we dedicate time to responsive adjustments.

Thank you in advance.

[David]

Hi there,

i would recommend NOT using the Full Width options in the Block toolbar as it uses CSS to overcome the container width, and it can cause some overflow issues.

Instead – set the Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

This gives you 100% full width, no padding blank canvas to work with. You can then construct the page with your GB Container Blocks

[Atmostfear]

Hello David,

Thank you for the insight, we have resolved every issue we had for now.

We wish your team a good day, and many thanks for the kind assistance and patience.

[David]

Glad to hear that!

[Author]

Posts