Archived topic
Secondary Menu inside mobile header
7 replies · Started by Daniel on August 29, 2021
Hi there,
I am using the fixed side bar menu that opens a slideout area and the secondary menu. Now, all is working fine, but on mobile view, the secondary menu is under the mobile-header like in the screenshot. So how can I have these two menus in one line in the mobile view?
Thanks,
Daniel
Hi there,
not easily with the Mobile Header. Any chance you can share a link to the site so i can take a look ?
Will the secondary Nav only contain that single link ?
If so i would remove this CSS:
@media (max-width: 768px) {
#secondary-navigation,
#secondary-navigation ul {
display: block;
}
#secondary-navigation .menu-toggle {
display: none;
}
#secondary-navigation {
top: 40px;
}
}And just leave the secondary nav hidden on mobile.
Then use a Hook Element to insert a HTML Link into the generate_inside_mobile_header hook:
https://docs.generatepress.com/article/hooks-element-overview/
Onces it in the Mobile Header we can apply some CSS to create the layout you need.
Let me know.
The secondary Nav will contain to a little dropdown with two links.
Just for me to know: on desktop and tablet all is working and looking fine. Can't we ignore the breakpoint of the mobile view, so it will stay same as well as on desktop and tablet?
Try adding this to the hook element instead, and checking the Execute PHP:
<div class="second-nav grid-container">
<?php
if ( function_exists( 'generate_secondary_navigation_position' ) ) {
generate_secondary_navigation_position();
}
?>
</div>It 'should' output the secondary nav inside the Mobile Header.
Done, but it displays the first main menu ;)
OK - so next step - is to disable the Mobile Menu for secondary nav.... this article explains how:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/
This should keep the desktop formatted menu.
