Menu position on hover reaching into main content - Support

Tagged: Menu position on hover

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
May 28, 2023 at 3:44 pm #1408871
beenee
Participant
Dear Enfold team,
I’m struggling for hours now with an issue that I can’t seem to find in the forum.
If you are in a form on the (test) website, the main menu hover reaches to far into the below seated main content (aka the form entry fields). So if you scroll down into the form you would accidentally click on the menu as opposed to the form entry.
I believe this is part of the relevant quick css:
```
/* menu align*/
.main_menu ul:first-child > li > a {
    line-height: 10px !important;
    margin-top: 180px  !important;
    background: transparent!important;
}
```
I can’t seem to find the right a:hover css command. Can you help please?
Best
Stefan
May 28, 2023 at 9:22 pm #1408897

Mike
Moderator

Hey Stefan,
Thanks for the link to your site but the page gives a 404 error, perhaps it is not published yet. I found another page with a form, but your menu above the form doesn’t have a dropdown so I can’t see what the issue would be. Please include an admin login in the Private Content area so we can be of more assistance. Perhaps a screenshot would help us understand better.

Best regards,
Mike

May 29, 2023 at 3:17 pm #1408945

beenee
Participant

I’m awfully sorry Mike,
just realized that I changed the URL after the support post.

Pls. find the right data below.

May 29, 2023 at 9:40 pm #1408958

Mike
Moderator

Hi,
Thanks for the link to your page, but I’m not understanding what your issue is because your description sounds like the sub-menu of your main menu on this page is over the form, but your main menu has no sub-menu items so there is nothing to be over your form on hover.
The css above is making your mobile menu items spread out too much:

If that is what you mean then remove the line margin-top: 180px !important; from your css.

But the burger menu is still going to be over the page content and form because that is the design of the burger menu.
Please try to explain further and perhaps a screenshot would help.

Best regards,
Mike

May 30, 2023 at 12:14 am #1408965

beenee
Participant

Hi Mike,
the problem is in desktop mode. The hover effect reaches into the form and avoids the entry.

Best regards,
Stefan

May 30, 2023 at 6:33 pm #1409047
Mike
Moderator
Hi,
Thanks for the feedback, your css to make the mobile menu items spread out is creating this error on the desktop, if you do want your mobile menu to be spread out then change your css to this:
```
@media only screen and (max-width: 767px) { 
.main_menu ul:first-child > li > a {
    line-height: 10px !important;
    margin-top: 180px  !important;
    background: transparent!important;
}
}
```
Otherwise remove the line margin-top: 180px !important; from your css.

Best regards,
Mike
June 8, 2023 at 11:17 am #1409957
beenee
Participant
Hi Mike,
the desktop menu is correct now. But the Burger menu shows large gaps between each menu item. I thought I would solve this like that:
```
@media only screen and (max-width: 990px) {
   padding-top: 10px  !important;
   margin-top: 10px  !important;
    background: transparent!important;
}
```
…or alike, but can’t get it to work.
any working ideas for a working mobile view are highly appreciated.
Thanks
Stefan
- This reply was modified 1 year, 6 months ago by beenee.
June 8, 2023 at 11:31 am #1409961

Mike
Moderator

Hi,
I found that this css was causing the large gaps: padding-top: 180px !important;
I commented it out for you:

and now the mobile menu is correct:

please clear your browser cache and check.

Best regards,
Mike

June 8, 2023 at 12:05 pm #1409970
beenee
Participant
Hi Mike,
correct, but now the main menu is not placed at the bottom of the header anymore:

https://img.savvyify.com/images/2023/06/08/imageb67c647f5b1f5110.md.png

whereas it was supposed to look like this:

https://img.savvyify.com/images/2023/06/08/image.md.png

There must be a seperate css for mobile view…. but I can’t get it to work:
```
@media only screen and (min-width: 768px) and (max-width: 990px)  {
   padding-top: 10px  !important;
   margin-top: 10px  !important;
    background: transparent!important;
}
```
June 8, 2023 at 5:57 pm #1410007
Mike
Moderator
Hi,
Try wrapping the desktop padding with media query like this:
```
@media only screen and (min-width: 768px) {
...
}
```
and the mobile version in a separate media query like this:
```
@media only screen and (max-width: 767px) {
...
}
```
If this doesn’t correct please include admin login in the Private Content area so we can help, the login above is not working.

Best regards,
Mike
June 9, 2023 at 1:22 am #1410024

beenee
Participant

Hi Mike,

I tried this, but get either a correct burger menu or a correct desktop menu.

Not sure what I’m doing wrong…?
Thanks for your help,

Stefan

PS.: btw. I just checked and the data (private area) is correct.

June 9, 2023 at 5:08 pm #1410084

Mike
Moderator

Hi,
Thanks for checking the login, I must have made a paste error, anyways I corrected your css, please clear your browser cache and check.

Best regards,
Mike

June 9, 2023 at 7:20 pm #1410092
beenee
Participant
Thanks Mike,
I didn’t understand my error but paste the new css here so anyone can participate:
```
@media only screen and (min-width: 768px) {
.main_menu ul:first-child > li > a {
    line-height: 10px !important;
    padding-top: 180px  !important; 
    background: transparent!important;
margin-bottom: 10px !important;
}
}
@media only screen and (max-width: 767px) {
    .main_menu ul:first-child > li > a {
        line-height: 10px !important;
        padding-top: 10px  !important; 
        background: transparent!important;
    margin-bottom: 10px !important;
    }
    }
```
Works well, as always thanks for your effort!
Ticket can be closed!
thanks again…!
Stefan
June 9, 2023 at 10:42 pm #1410098

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts