0

The current theme of my WordPress website has two menus, a top menu and a bottom menu

The dropdown menu of the bottom menu are overlaid by the above content for example

I tried to perform the setup of the z-index, putting z-index: 20000 for example, but it didn't work for example

Does anyone have any idea on how to fix it?

My WordPress website: www.rodrigocorrea.org

CSS:

@media (min-width: 43.75em)
.menu-footer-items .sub-menu:hover {
    bottom: 24px;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media (min-width: 43.75em)
.menu-footer-items .sub-menu {
    position: absolute;
    background: #1A1A1A;
    text-align: center;
    margin: 0;
    min-width: 100%;
    max-width: 220px;
    left: auto;
    right: auto;
    bottom: -9999px;
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.menu-footer-items ul {
    list-style: none;
}
2
  • Please update an image on the problem here so we can know what exactly the problem is.
    – Toan Lu
    Oct 23, 2021 at 4:21
  • Instead of having a separate navigation that is the same as the one in your header, why not make your header navigation sticky on scroll, so that the menu is always there for the user to interact with? Might be the better option.
    – David
    Oct 23, 2021 at 5:16

1 Answer 1

0

Remove overflow from footer: Set custom css:

footer.site-footer {
    overflow: initial !important;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.