Can't remove top padding in main menu container - Support | Kriesi.at

Tagged: container, main_menu, menu, padding, space above

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

Author

Posts
May 26, 2023 at 2:54 am #1408603
garysch37
Participant
Dear Support Team:

Well above (1 cm above) my main menu (it’s positioned in my header), I still have the finger mouse cursor used to select a menu item, and if I’m hovering in that space above a particular menu item that has a submenu, that submenu appears (in its correct place under that menu item). If I put a test border around the main menu’s container:
```
#top #header #header_main .inner-container .main_menu {
    border: 3px dashed red !important;
}
```
I see that padding-like space above the menu items, as you can see in this screenshot: https://www.dropbox.com/s/7fe8kabnc1g2rc7/menu%20container%20padding.jpg?dl=0

All I’m doing in my child header.css is:
```
#top #header #header_main .inner-container .main_menu {
    align-self: center;
    right: 0;
    height: inherit;
}
```
I probably got that height inherent from Enfold documentation, but it was so long ago in my new website design process, I can’t remember. But there’s no change if I leave out the height style.

The biggest problem is that if a user wants to copy and paste our phone number, they can’t because the mouse cursor is the finger instead of the text selection icon; and even if they start their selection in the snail or email address and drag downwards, they won’t be able to select the phone number. Perhaps I can fix this by changing the position of the menu along the z-axis, but that’s not the point. Hovering that far above the menu should not invoke the menu selector cursor, or the submenus.

I tried everything I could think of to get rid of that space and bring the top of the container to its proper place just above the menu items themselves. I can certainly affect the height of the container, but that only affects the container’s bottom edge, bringing it closer to the menu items, but not its top edge.

Also, my positioning of the menu is done via:
```
#top #header #header_main .inner-container .main_menu {
    top: 120px;
}
```
This position is exactly where I need it. Changing it moves the menu items to a different position, without affecting that top “padding”, and it’s not the correct position then.

Suffice it to say that I tried all kinds of things, including zeroing out all margins and paddings in CSS of the entire DOM structure under “#top #header #header_main .container .inner-container”, and specifically everything under “#top #header #header_main .container .inner-container .main_menu”. I’ve tried changing heights of all elements in that DOM; etc. I’ve also looked at all the DOMs in the browser’s Inspector and see no culprit, and tried turning off some value settings there. But nothing worked. The only thing I haven’t tried is looking through all Enfold/Aria parent files. But I thought it’s just faster to see if you have a solution.

Can you help please. I have some additional instructions for you in the private area, regarding my debug code (for debug borders) in my child functions.php if you need it.

Thank you,
Gary
- This topic was modified 1 year, 2 months ago by garysch37.
May 27, 2023 at 3:36 pm #1408783
Mike
Moderator
Hey Gary,
Thank you for the link to your site and the screenshot, please note the height of the menu item links:
```
.av_minimal_header .main_menu ul:first-child > li a {
    height: 90px;
    line-height: 90px;
}
```
Try this css for desktop:
```
#header.av_minimal_header .main_menu ul:first-child > li a {
    height: 30px;
    line-height: 30px;
}
#top #header.av_minimal_header #header_main .av-main-nav .sub-menu {
    margin-top: 0px;
}
@media only screen and (min-width: 1015px){
#top #header #header_main .inner-container .main_menu {
    top: 150px;
}
}
```
and model and adjust to suit for other devices

Best regards,
Mike
May 30, 2023 at 6:17 pm #1409042
garysch37
Participant
Hi Mike!

Thank you for your solution: that was what I needed.

I did have to tweak it a bit: it turned out that the “line-height:30px” was fine, but I couldn’t do the “height:30px” because then the submenu looses the wrapped text part of any extra long submenu items (it would just display the first line, but not the second line, of the wrap), and the hover bar on a submenu item looses it’s bottom padding. I don’t understand how, but the “line-height:30px”, plus moving the top of the “.main_menu” (and moving the margin-top of the “.sub-menu”), was sufficient to loose that “padding” above the menu.

The only weird thing was that I lose your solution at browser widths 615-767px. If I try to reapply it within those breakpoints:
```
#header.av_minimal_header .main_menu ul:first-child > li a {
    line-height: 30px !important;
}
```
I end up creating a problem at the burger activation point of (max-width: 614px), where now the burger icon is squished to 30px high instead of its 80px high. But if I do this at this burger activation point:
```
#header.av_minimal_header .main_menu ul:first-child > li a {
    line-height: 80px !important;
}
```
then the submenu items in the overlay are all spaced 80px vertically. I don’t know how to get around this. So I decided that since we’re only talking about the padding-above-the-menu problem at widths 615-767px, I can put up with this spacing problem. So I’ll just do nothing at 767px to fix it. I’m content with this.

Thanks,
Gary
- This reply was modified 1 year, 1 month ago by garysch37.
May 30, 2023 at 6:21 pm #1409044

Mike
Moderator

Hi,
Glad we were able to help you on the right path to a solution, and thanks for sharing your results it may help future users. 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