Menu hover not justifiable to the according option

Store Design
, , , , , , ,
1

Hi all,

I am having issues figuring out how to adjust the hover content on the website to adjust to only the appropriate option and not be on full width.
Please see attached picture below regarding the issue.

1cando1t_0-1705197205664.png
1cando1t_0-1705197205664.png1623×339 31 KB

Then I am having another issue when the options stack up on each other and the hover menu disappears before I get the time to hover the mouse to the mega menu displayed. Please see picture below:

1cando1t_0-1705197879507.png
1cando1t_0-1705197879507.png1005×466 74.5 KB

For this issue I tried to adjust the position of the mega menu when displayed and also ruined it too.

Thank you in advance for whomever might try and contribute to this question.

2

@1cando1t - can you please share this page link?

3

www.gaboo.ch

4

@1cando1t - issue is that your menu items are on second line and hence when you try to open drop down mega menu, it goes down creating the issue you are facing right now, I recommend to either remove few menu items and check, or reduce font size of them to get them in single line

5

Can I make the fonts smaller when the device display is smaller for exampel from a 17inch or smaller it would have smaller fonts?

6

@1cando1t - please add this css to the very end of your base.css file and check, it will reduce font size on bigger screens

@media screen and (min-width:750px){
.header__menu-item{font-size: 1rem !important;}
.header__menu-item span:hover {font-size: 1rem !important;}
}
7

I will try it right away, but there is also one more question I made regarding the width size being too big and kind of out of control. Do you maybe have some suggestions for that too?

8

@1cando1t - I think reducing font size will sort spacing issue to some extent

9

I did try the code but still the same, could it maybe work if we make the drawer appear instead of the menu for sizes where the menu contents would be stacked upon each other?

10

@1cando1t - check if your theme has an option for menu drawer, if it has then it can be done

11

it does have one, I am using the dawn theme. You can check the screenshot below where it activates for media screens below 750px. But I don’t where it is located to adjust it as needed…

1cando1t_0-1705204727407.png
1cando1t_0-1705204727407.png972×773 340 KB

12

@1cando1t - check customize setting for the active theme

13

I am trying to fix it in the header.liquid file but from all of the code I have been implementing, the changes that occur are either none or for other things totally different.

This is some part of the code with which maybe you can help me:
{%- liquid
if section.settings.menu != blank
if section.settings.menu_type_desktop == ‘dropdown’
render ‘header-dropdown-menu’
elsif section.settings.menu_type_desktop != ‘drawer’
render ‘header-mega-menu’
endif
endif
%}