Docs

[TanglewoodPub]

Hello!

First, thanks so much for all of the help that you continue to provide!

I noticed on my site that when I minimize the screen, or look at the website on my phone, the responsive navigation minimizes beautifully, and when I click it, the navigation links flow down well.

The problem is when I open the second tier links with the two upside-down arrows. The second tier links will appear, but then when I close it–hitting the upside-down arrow again–the text for the links stay and overlap with the first tier links that are flowing back into place.

1) Is there a way to make sure that when I close the second tier, it really does disappear fully so there is no weird residual overlapping

2) Is there an option to move the responsive navigation menu button to the right of the screen instead of in the middle of the screen when it minimizes?

Many thanks!

[TanglewoodPub]

This reply has been marked as private.

[Rupok]

Hi there,

It seems you have placed the below custom CSS :

.x-navbar .menu-item:hover .sub-menu {
  display: block !important;
}

It seems unnecessary and I am not sure why you added this. Kindly remove this to get expected result.

Thanks!

[TanglewoodPub]

I was told to add it by one of your colleagues because I need users to be able to select the main tab–books–if to see all books, but also to be able to access the dropdown menu.

If I take that code out, then I believe that will disable that important feature.

[Rupok]

Hi there,

In that case you can update the code as below :

@media only screen and (min-width: 980px) {
.x-navbar .menu-item:hover .sub-menu {
  display: block !important;
}
}

Hope this will do the job without affecting the mobile menu.

Cheers!

[TanglewoodPub]

That did the trick!! Thank you!

[Christian]

You’re welcome.

[Author]

Posts