Secondary menu in mobile view

[Ryan]

Is it possible to make the secondary menu display the same on mobile view as it does on desktop? For the site i am working on, the secondary menu is very small (contains three links) and when looking on the smartphone it ‘squishes’ up against the site branding/logo and looks even worse when the hamburger menu is opened. Plus it is just confusing as there is already the main menu in a ‘hamburger’

I looked for a way to disable it in the Customiser and could not find it. Is there a straightforward way to get the secondary menu to display under the site identity (logo) on the mobile view? Right now on desktop view it is floated to the right and that looks fine.

I’d attach pics of what I want but I don’t know how to do that in your forum.

[Tom]

This might help: https://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/#post-120014

Let me know 🙂

[Ryan]

Ok I implemented the code as you recommended and got rid of the ‘hamburger’ behaviour. I had to add quite a lot of CSS style over rides to your theme styles and target a few responsive breakpoints but I think I’m closer to the end goal.

One thing I am really struggling with right now is to get the secondary menu to appear below the site identity element (logo) when viewing on mobile/smartphone devices. Right now it appears at the top and it looks kinda ugly.

I am assuming I will need to customise the php code for the header.php file. Something I think I might have already done in the functions.php file to modify the display of the site identity within the header. How would I go about it? Is it better to use some GP Hooks to swap the order of the secondary menu and the site identity element or make a copy of the header.php file in my child theme?

By the way, I want the behaviour to still be the same on desktop/tablet where the secondary menu aligns with site identity element and floats right from it.

[Tom]

Try something like this:

@media (max-width: 768px) {
	.inside-header {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	.site-branding {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
    
	.site-logo {
		-webkit-box-ordinal-group: 2;  
		-moz-box-ordinal-group: 2;     
		-ms-flex-order: 2;     
		-webkit-order: 2;  
		order: 2;
	}

	.secondary-navigation {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}
}

[Author]

Posts