Navigation bar disappears on mobile

Hi,
I have modified the navigation bar on my website in the following way. It works perfectly on desktops but on smartphones there is no navigation bar when scrolling down. I cleared all the caches with W3 total Cache and on the devices too. I guess it is a matter of adding few lines of CSS but the previous solutions found online didn’t seem to work.

How would it be possible to have the desktops’ behaviour on mobile devices? Possibly by also resizing the height of the bar so that it doesn’t take too much space on a smaller screen. Any suggestions are welcome!

Thanks
Gio

/* remove the search and the menu button on the top right of the homepage for all devices*/
#site-navigation .search-widget-handle {
    display: none;
}
/*half transparent*/
nav#site-navigation {
    background: rgba(255, 255, 255, 0.5);
	z-index: 99;
}

/*remove, or make invisible, the borders around the content and widget areas*/
*:focus {
    outline: 0;
}

Hello there,

I hope you are doing well today.

Just to confirm, you want to have the menu appear on mobile as it does on the desktop version?

Best Regards,
Support

Thank you for the prompt reply.

Exactly that. I managed to show the menu on mobile with the command
position: fixed !important;
However its height is fairly big, and it would be good to adjust it according to the media screen. Is that possible?
The updated additional CSS now looks like

/* remove the search and the menu button on the top right of the homepage for all devices*/
#site-navigation .search-widget-handle {
    display: none;
}

/*half transparent*/
nav#site-navigation {
    background: rgba(255, 255, 255, 0.5);
	z-index: 99;
	position: fixed !important;
}

/*remove, or make invisible, the borders around the content and widget areas*/
*:focus {
    outline: 0;
}

Best regards,
Gio

Good evening here

Sorry but you cant have normal/desktop navigation bar on the small screen devices only with the css codes you posted here, this requires much more and not only in css, my suggestion is to find third party plugins if suchmenu is necessary for you

Thank you for your reply. I used a different approach to help the navigation, i.e. inserting a “To top” button in the webpage on all devices.

Hi there

that’s good :slight_smile:
Do you have other questions about our theme?

Not at the moment, thanks :slight_smile:

Hi,

Glad we helped. :slight_smile:

Let us know If you have any other questions. Please feel free to contact us again in the future regarding any other issues.

If you’re happy with our service, don’t forget to rate us: [Shapely] Reviews | WordPress.org

Thanks,
laranz.