How can I resolve menu responsiveness issues on my website?

Store Design
1

Hey guys could someone help with an issue i’ve got when i hover over my menu to show it I can’t quite see some of the content as when you scroll down it closes the menu. Does anyone know how i can fix this, it seems when hovering to open the menu it doesn’t actually just scroll the menu down when needed but the page.

The image below should make it easier and if you try yourself just go to https://directcomputers.co.uk/ hover over gaming then the first tab and try to view the content at the bottom of that tab, it will close the menu before you see it.

joshsadler98_0-1641509698806.png
joshsadler98_0-1641509698806.png1913×856 255 KB

1 Like
2

@Anonymous

Sorry you are facing this issue, it would be my pleasure to help you.

Please share your issue image,
I will check out the issue and provide you a solution here.

3

@Anonymous

Sorry i can’t get your issues properly will you share me screen Shot and mark on it what do you want exactly.

4

Hi @Anonymous ,

Go to Assets > theme.css and paste this at the bottom of the file:

.tmenu_item_submenu_type_tab.tmenu_item_active .tmenu_submenu_tab_item.tmenu_submenu_tab_active{
	height: 90vh !important;
    overflow: auto !important;
}

Hope it helps!

5

I don’t think it’s helped only because if you see here: the bottom bit is still cut off highlighted in yellow for everyone to see. Basically it’s when you scroll down the menu collapses into a burger menu, I believe that’s what is causing the issue as instead of scrolling down to view the cut off content it will just close the menu,

Hope this makes it clearer!

joshsadler98_0-1641559096145.png
joshsadler98_0-1641559096145.png1917×999 322 KB

1 Like
6 
.tmenu_collection--bellow .tmenu_item_text {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    display: block;
    margin-top: -50px !important;
    margin-bottom: 5px !important; 
}

@Anonymous
Add this code in theme.css file
Thank you

7

Hi @Anonymous ,

Please add code:

@media screen and (min-width: 1024px) {
	.site-header-sticky--scrolled .site-header-menu-toggle{
		opacity: 0 !important;
	}
	.site-header-sticky--scrolled .site-navigation-wrapper{
		display: block !important;
		margin-top: 0 !important;
	}
}

It will keep the menu always visible even when active sticky header.

Hope it helps!

8

Thank you so much all working now :slightly_smiling_face:

1 Like