Strange occurrences – sticky menu and sidebar removal

[Tom]

Can you try adding this?:

@media( max-width: 768px ) {
	#site-navigation,
	#sticky-navigation {
		display: none !important;
	}
	#mobile-header {
		display: block !important;
	}
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

This sort of fixes the problem….. the sticky menu works at parent level, but doesn’t display any children.

Assuming I’m not trying to do something i shouldn’t be then is odd. It was working fine with the above settings – so backtracking – i made the following changes: removed carats from menu, added the fancy menu underling script that Luiz created and then tried out the centred logo – which is where changes to the header etc were made. After trialling it didnt work well with the site design so i removed the latter 2. But none of the old code is there so i cant see that this would be affecting it.

The only other thing that i was originally concerned about was a not:hover CSS I’m using on the woo commerce products (it hides the basket buttons until the item is hovered over). Im not that knowledgable of CSS and was concerned that this may cause issues with other features on the touchscreen but again it never showed up before!

Ghost in the machine lol

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

I think the issue here is having the sticky transition set to none, and enabling the mobile header with the sticky option enabled.

The CSS I provided should fix this issue.

I just went to check your site, but it looks like you’ve changed the settings.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi Tom, thanks for checking in again. O.K the code you provided does work as along as i dont want to access children of the menu. I put the site back to the settings and included your CSS so you can see.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Sorry was meant to say the Transition is set to Fade.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Here’s what I’m seeing now: https://www.screencast.com/t/PBOPCLYgi

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi Tom – same here. The only thing is both menus have submenus which don’t show on the mobile.
I can fix this by changing the menu action from hover to click which then works but you cant select the parent menu ie. Shop, just its children. Alternatively I can disable mobile header and then the menu works correctly whether on hover or click.
I have noticed with the current settings when open on a mobile device the entire mobile header is responsive to touch – link here is me touching the white space on the menu. Is this normal:

Touch white space on header

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

You’ve removed the dropdown arrows which are required for the mobile dropdown functionality.

You could try removing them on desktop only:

@media (min-width: 769px) {
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

As for the other issues, I’m not getting that on my Android device using Chrome.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Hi Tom,

i think a lot of the issues are related to how touch devices (different OS / browsers) deal with Hover. All the issues disappear when i use Click instead. So in this instance practicality will win over aesthetics. Happy to say case resolved – again learnt a lot. Much appreciated

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

No problem! Thanks for pointing out the mobile header bug 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts