[Support request] Just one item always visible on mobile

[Marian]

Hello,

I have Ultimate Member plugin which allows me to create a menu item with tags {first_name}{last_name}, so logged-in-user’s name is displayed. When it is in the primary menu it works fine together with two subitems.

However, I would like to have that one menu item on mobile displayed at all times. The other manu items can be in the burger menu.

I’ve tried using a secondary menu (…but I dont want to have primary and secondary menu stacked, and also secondary and primary nav together look messy on mobile)

I was thinking about “merging” primary and secondary navigation, so they are next to each other (not above/stacked) floating right, like this

LOGO PrimaryNav SecondaryNav

…but when I float both right they are stacked, don’t know whether such thing is even possible.

I tried creating Block element with navigation block in it, but to no avail. The tags are ignored.

Here are some pics to make it easier to understand what I want to achieve.
desktop current primary nav
Mobile view

I’ll be grateful for any pointers,

M.

[Fernando]

Hi Marian,

What specific plugin is this? Do they have shortcode equivalent for tags or does adding curly brackets work – ex: {{first_name}}?

Can you reach out to them and ask if there’s a way to add those template_tags through the editor?

[Marian]

Hello Fernando,
Thank you for your reply. The plugin is Ultimate Member. As it turns out there is a way how to display those values by means of a shortcode [first_name][last_name]. I put them into a block element and hooked as menu_bar_items. It works well – a logged-in-user name is displayed on both desktop and mobile as expected. I would however like to style it a bit (change color, padding) and most of all make it clickable and ideally have a dropdown menu with itmes. Is something like that possible to do with a shortcode?
Thanks,
M.

[David]

Hi there,

you could use the Secondary Navigation.
Try:

1. Create your menu for your secondary navigation.

2. Disable the Secondary Nav Mobile layout so it always shows the desktop:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

3. Remove the secondary nav from the theme by settings it location to: No Navigation.
https://docs.generatepress.com/article/secondary-navigation-location/

4. Hook the Secondary nav back into the themes Menu Bar Items, so it shows aside of the primary menu on desktop and mobile with this PHP Snippet:

add_action( 'generate_menu_bar_items', function(){
    ?>
    <div class="second-nav grid-container">
	<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
	?>	
    </div>
    <?php
});

[Marian]

What an amazing solution! It works almost as expected. Now I need to keep my secondary menu always displayed on mobile (now it’s just in a hamburger menu and its not clickable).
mobile view
I saw somewhere php to keep seconday always visble on mobile, so that might work.
Anyway. Thank you both so much for your kind help.
M.

[David]

Did you apply step 2?

2. Disable the Secondary Nav Mobile layout so it always shows the desktop:

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Marian]

Hello David,
I did indeed. I double-checked and found that both the snippet and CSS were where they should be.
Desktop is absolutely fine, exactly how I imagined it to be.
Desktop secondary nav in primary nav
However, in mobile view there are two hamburger buttons now, the right one (the remnant of the secondary nav I presume) is dead, unclickable)
Mobile view
If I tap the left mobile nav button, it works, I mean, it opens up, but the secondary nav seems to be nested in it and doesn’t function.
After clicking on the “primary” mobile navigation button
If I disable the last snippet, and also use “disable the secondary nav mobile layout so it always shows the desktop”, it works (but of course is not aligned with the primary).
I tried the process locally and, just to be sure, in my CSS editor I put just the css you provided and I disabled all unnecessary plugins. To no avail, though.

[David]

Can you disable Autoptimize so i can take a closer look ?

[Marian]

Done.

[David]

Ok, try adding this CSS:

#secondary-navigation .secondary-menu-toggle {
    display: none !important;
}
#secondary-navigation ul {
    display: block !important;
}

[Marian]

…that is exactly it. Speechless 🙂
Thank you.

[David]

Happy to be of help!!

[Author]

Posts