Archived topic
Nav Link Not Showing In Site Header On Tablet/Mobile, Tablet/Mobile Sticky
17 replies · Started by Michelle on August 4, 2022
Here's what I've done so far:
I used a Header Element to replace my site logo with a custom category logo.
I made that logo sticky with a Hook in wp_head
I hid all but one nav item for this category through CSS
This wouldn't show on mobile, so I tried a different tactic and added the nav item through a Block Hook Element on the menu_bar_items hook
...still no nav item on tablet/mobile nor on tablet/mobile scroll
I keep thinking it is just a padding issue, but adding padding into the block container isn't making any difference.
I also added the nav item in generate_menu_items but the nav item is not a link; it is dynamically functional to show login, or logout, respectively. It is a plugin function.
Hi Michelle,
What’s the name of the specific Block Element - Hook? I’ll take a look at it.
THANK YOU!
Can you try after_primary_menu hook?
Presently, it is menu_bar-items, but I also tried:
inside_navigation
inside_mobile_menu
inside_mobile_menu_bar
Trying your suggestion now...
That works on tablet, but not on mobile. We're halfway there :)
I see. set it back to menu_bar_items
Add my-cat-menu to the class list of your Container Block in your Block Element, and then add this CSS:
nav#mobile-header > .inside-navigation > .menu-bar-items .my-cat-menu .wp-block-navigation__container {
display: block;
}I'm looking for class list. I'm not seeing where it is.
Found it. Trying it now.
It shows now. It just needs the padding adjusted. You are amazing at this. I've spent two weeks on it.
To make sure, is it working for desktop?
Uh oh. One more problem: I don't know how to get rid of the black Logout nav item right next to it. It shows because of this css, but if I delete the css, it takes away both nav items, not just the black one:
/*Hides all nav items except for login-logout nav item on page*/
.page-id-6619 .main-navigation li:not(.login-logout,.join) {
display: none;
}How about editing it to something like this?
.page-id-6619 #primary-menu{
display: none;
}That worked, which is good because disabling elements "Primary Navigation" in page editing turned off ALL.
If I want the same settings for my custom category Single Post pages and category archive, how can I do this? I will ask in a different thread to keep things better for the forum if you want.
That worked, which is good because disabling elements "Primary Navigation" in page editing turned off ALL.
If I want the same settings for my custom category Single Post pages and category archive, how can I do this? I will ask in a different thread to keep things better for the forum if you want. I know how to set the display in Elements, I mean the css for the navigation :)
