menu disappears on scroll down on mobile/tablet

Shapely
1

Hi there,

I’m using Shapely theme on an up-to-date Wordpress and I’ve created a child theme for the site.

The problem is after I click the hamburger menu icon on any mobile or tablet device, the menu appears, but when I scroll down to click on one of the lower buttons (which is off the bottom of the screen), the whole menu just disappears. When I scroll back up the menu re-appears. This means I can’t access those menu items at the bottom of the list.

I installed the plugin ‘myStickymenu’ to see if this solved the problem but it didn’t.

I’ve also searched the forums and couldn’t find a resolution for this.

The URL for my site is: http://www.coachhouselets.com/wordpress/

Any help will be greatly appreciated.

Many thanks,

Jeremy

2

Just to add this - in my CSS I had actually set my nav.fixed.scrolled to this:

nav.fixed.scrolled {
visibility: hidden;
opacity: 0;
}

When I reverted this back to its original settings it still had no effect on the menu disappearing.

Jeremy

3

Hi Jeremy,

I hope you are well today and thank you for your question.

I visited your shared site and found this is happening because of some custom CSS code you have added in the style.css file of your child theme.

To resolve the issue try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


@media screen and (max-width: 768px){
	nav#site-navigation {
    visibility: visible;
    opacity: 1;
        margin-top: 0;
}
}

Best Regards,
Movin

4

Hi Movin,

thank you so much for the swift reply.

I have done exactly as you advised and the issue is better but not entirely resolved.

The menu has stopped disappearing, but I can’t scroll down the menu list to access the bottom items.

Any more suggestions will be massively appreciated.

Very best regards,

Jeremy

5
The menu has stopped disappearing, but I can’t scroll down the menu list to access the bottom items.

Try using the below CSS code to make it accessible.



@media (max-width: 991px){
nav#site-navigation.fixed.scrolled {
    position: absolute;
}
}
6

Perfect! That has worked a treat!

Thank you so much Movin and best regards to all of the Colorlib team for your amazing themes :smiley:

Best regards,

Jeremy

7

You are most welcome here :slight_smile: