Logo visibility issue due to menu and sub-menu

[weblax]

Hello,

I contact you to find out how I can solve the problem that when I hover over a menu item and it displays below, it hides the logo, or at least the logo is not fully displayed (hidden a little).

So, I tried to put the logo in the middle, and the menu on the left, but this is the same thing, the logo is still hidden when it should be visible entirely.

Is it possible to increase the margin between the elements at the bottom when you hover over them, or to add a space in between to avoid hiding the logo and menu?

Awaiting your reply, best regards.

• This topic was modified 2 days, 1 hour ago by weblax.

Attachments:

You must be logged in to view attached files.

Hi,

By default, all dropdowns in the menu with the default style appear directly below the parent menu items. If this dropdown overlaps important header elements, the most straightforward solution would be to push the dropdown further away from the menu by increasing the distance between them when opened. This can be done using the following custom code.

You can adjust the spacing value as needed, but to ensure the code works correctly for your case, you must change the 50px value in both lines of the custom code simultaneously.

.wd-nav-main .wd-design-aside {
    top: calc(100% + 50px);
}

.wd-nav-main .wd-design-aside:after {
    height: calc(15px + 50px);
}

We also noticed that you are using other custom header modifications. To ensure that our custom code works correctly, we recommend disabling all other customizations before applying ours to avoid conflicts.

Kind Regards

Hello,

I just applied what you told me, and I’m glad it works perfectly.

However, when I scroll down there is a space between the menu and the fixed top of page. And I took the liberty of modifying the code structure and adding an additional CSS.

.wd-nav-main .wd-design-aside {
    top: calc(100% + 50px);
}

.whb-sticked .whb-general-header .wd-dropdown:not(.sub-sub-menu) {
    margin-top: 30px!important;
}

I saw that also in the custom CSS it could be applied according to the devices.

Will the code also work on all devices in global, or do I have to set a new code according to the devices where the page can be viewed?

Kinds Regards.

Attachments:

You must be logged in to view attached files.

Hi,

The Custom CSS section allows you to apply code specifically for certain devices, and any code entered in the corresponding field will be wrapped in a @media query with the appropriate screen width. However, in your case, the code can be placed in the Global Custom CSS field since dropdowns are hidden on mobile devices, and the difference in changes will not be noticeable.

Kind Regards

Good evening,

I will contact you to tell you that it works well, but the problem is that when I put my mouse on the first item of the “Shop” menu, I can’t access the submenu that appears too low. (image)

And secondly, when I scroll down a little, the items in the “Menstrual cycle” submenu are not aligned as they should be. (image-2)

Do you have a solution to all this, because by manipulating the CSS, I can’t find compromises.

Kinds Regards

Attachments:

You must be logged in to view attached files.

Hi,

1. After reviewing your site, we noticed that the following part (https://monosnap.com/file/W1iLuRbCwsZfnVxoZDtJfbitqbh9Bk) of our previous custom code is missing. Please add this part as described in our previous response (https://xtemos.com/forums/topic/logo-visibility-issue-due-to-menu-and-sub-menu/#post-635043) and try again.

.wd-nav-main .wd-design-aside:after {
    height: calc(15px + 50px);
}

2. The issue with the spacing in the sub-dropdown is caused by your custom code, which modifies the spacing of all menus when the header transitions into the sticky status, including the spacing of child dropdowns (https://monosnap.com/file/BbOktd3zE090OoToTBjyTe8JQyYlml). To fix this issue, try modifying the selector in your custom code or removing !important if you want to create your own custom styling manually.

Otherwise, remove all your custom code related to the header as mentioned in our previous response, and apply the custom code we provided in that same response (https://xtemos.com/forums/topic/logo-visibility-issue-due-to-menu-and-sub-menu/#post-635043). If any new issues arise after applying our custom code, please describe them to us, and we will update our custom CSS code accordingly to address all problems.

Kind Regards

Hello,

I just deleted my code and applied yours that you gave me, and this solves the first problem of when one is at the top of the page, the display of the “Shop” menu and the logo are quite spaced.

But on the other hand, when I scroll down, there is always this white space that is between two (see the image sent).

I would like to know how I can reduce this white space when I click on “Shop” and scroll down.

Kinds Regards.

Attachments:

You must be logged in to view attached files.

[Author]

Posts