Menu bar and sub-menu not center in mobile

Support
#1

Hi there,

Having difficulty here in mobile, as the menu bar and sub-menu cannot won’t seem to center in mobile. I’ve tried everything. Would you mind taking a look? I’ve taken screenshots of what I’m seeing and provided in secure note…

#2

Hi @RocktheHouse1876,

I checked the website and found out that you use the UberMenu for that specific menu. For some reason the UberMenu generates additional code that causes the positioning problem:

As soon as I remove the nav tag from the code, the positioning is correct:

But the problem is that the nav section is the dropdown functionality. I suggest that you consider using the Navigation Collapsed or Navigation Modal or Navigation Dropdown elements instead of the UberMenu.

You can use the Hide During Breakpoint feature for those elements to hide them on the desktop screens and only show them on mobile screens.

Thank you.

#3

Interesting workaround!! Thank you for looking into this… I thought I was losing my marbles. Per your suggestion I’ve setup Navigation Layered.

2 questions.

  1. Is there anyway to change the color of the "← Back”?
  2. Currently, there is only a hamburger button in mobile… would it be possible to add the word “Menu” after the hamburger button?
#4

Hello @RocktheHouse1876,

1.) Is there anyway to change the color of the "← Back”?

.x-menu .x-anchor.x-anchor-layered-back .x-anchor-text-primary {
    color: blue;
}

.x-menu .x-anchor.x-anchor-layered-back:hover .x-anchor-text-primary {
    color: cyan;
}

Feel free to change the colors.

3.) Currently, there is only a hamburger button in mobile… would it be possible to add the word “Menu” after the hamburger button?

  • You may enable the Text Setup in the Menu > Toggle > Text

We would love to know if this has worked for you. Thank you.

#5

P E R F E C T O… Thank you!

#6

You are most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.