Problems with UberMenu submenu and mobile formatting

[DanielExMachina]

Hi there. I’ve run into a few difficulties with UberMenu on my site and would greatly appreciate some assistance.

I’ll list out my questions to make them easier to follow.

1. SUBMENU INDICATOR ARROW
To start off, I’d like to align my submenu arrow with my menu text:

I should note that it was an absolute nightmare to align my logo, menu items, and menu icons in the navbar. I did this before adding submenu items, so I’m guessing the weird arrow position is related to the settings I changed:

CUSTOMIZER: (UberMenu [Main])

• Menu Bar > Menu Bar Margin Top: -45px
• Top Level Items > Top Level Item Margin: 0px 0px -10px 0px

APPEARANCE: (Logo menu item Uber settings in Menus > Primary Menu)

• Image > Custom Image Width: 68px
• Customize Style > Padding: 49px 23px 0px

X THEME OPTIONS:

• Headers > Top Height: 73px

I’d like to move the arrow without changing any of those if possible. I’ve tried and failed to find the correct CSS class to target the arrow - any ideas?

---

2. SUBMENU VERTICAL ALIGNMENT
Right now the text for each submenu item is aligned to the top of the flyout. I’d like to vertically align each submenu item in its flyout slot:

How can I do this? (Nothing happens when I try to add padding via Customizer > UberMenu [Main] > Normal & Flyout Items > Flyout Items Vertical Padding)

---

3. REMOVE WHITE LINE & MARGIN ABOVE SUBMENU
How can I remove the extra space and white line between the bottom of the navbar and top of the submenu?

---

4. SHIFT SUBMENU FLYOUT TO RIGHT
How can I shift the whole submenu right a few pixels (I want to align its left side with the beginning of its parent’s icon)?

---

5. REFINE “ACTIVE” HIGHLIGHT FOR MENU ITEM
The custom URL for the menu item Contact is https://glyphvisual.com#contact, which takes you to the contact form on my homepage. Currently, the Contact item is always in “active” mode (i.e. bright white text) wherever you are on the homepage. I’d like it to only highlight when you scroll down to the contact form section. How can I configure this?

---

6. (MOBILE) ADD HOME BUTTON TO NAVBAR & REMOVE FROM DROPDOWN
How can I move the logo out of the mobile dropdown menu and into the navbar on the left side (opposite from the hamburger toggle)?

---

7. (MOBILE) ALIGN DROPDOWN MENU ITEMS TO RIGHT
How can I align the mobile dropdown menu items to the right side (in Main UberMenu Configuration > Responsive & Mobile, I set Responsive Toggle Content Alignment to Right, but nothing happened)?

Thank you so much in advance. I know this is a lot to ask, but trust me, I wouldn’t be asking if I hadn’t already sunk most of my day into trying to figure them out myself.

[ruenel]

Hello @one_eyed_man,

Thanks for the very detailed post information.

1.) Please change your styling and settings:

CUSTOMIZER: (UberMenu [Main])

• Menu Bar > Menu Bar Margin Top: -45px
• Top Level Items > Top Level Item Margin: 0px 0px -10px 0px

Remove the top margin or set it to 0. Use margin: 0 auto.

X THEME OPTIONS:

• Headers > Top Height: 73px

This should be at least 130 pixels.

And also, please check out for this custom CSS:

/*Manually vertically align UberMenu text menu items*/
#menu-item-2803 a, #menu-item-2808 a, #menu-item-2801 a, #menu-item-2804 a {
  padding: 0px 23px 32px;
}

This what making the submenu icon not at the center. Remove it or change it to padding: 20px 23px 20px.

2.) This is because of the custom code that you have added to set the padding of the menu items.

3.) The white line is coming from the Minimal CSS Skin. Go to Appearance > Customize > Ubermenu > General > Skin and then change it to none.

4.) Again, this has something to do with the custom CSS that sets the menu item adding.

5.) To fix the logo issue both in desktop and mobile, please check out this documentation and tutorial first:

• https://sevenspark.com/docs/ubermenu-3/content/images/logo

Kindly let us know how it goes.

[DanielExMachina]

Thanks for you response @ruenel.

I followed your suggestions and set Menu Bar Margin Top to 0px, Top Level Item Margin to 0px auto, Top Height to 130px, and removed the CSS I’d added to manually align the menu items.

These changes successfully addressed my questions #1, #2, and #3. Thank you!

Unfortunately I’m now more or less back where I started before I made the changes to vertically align my navbar elements:

How can I vertically align my logo with the other menu items, and remove the excess space above the navbar?

Also, in reference to question #4 from my first post, how can I shift the flyout menus to the right? (If you could give me a hint on the right CSS class to target, I should be able to do it myself.)

[ruenel]

Hello @one_eyed_man,

You have added this custom CSS code somewhere that adds a padding around your logo image:

.ubermenu .ubermenu-item.ubermenu-item-2815 > .ubermenu-target,
.ubermenu .ubermenu-item.ubermenu-item-2815 > .ubermenu-content-block,
.ubermenu .ubermenu-item.ubermenu-item-2815.ubermenu-custom-content-padded { 
        padding:49px 23px 0px; 
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Also add a negative bottom margin like: margin-bottom: -20px so that your logo image will align vertically.

And now, this is how you submenu items looks like on my browser screen:

Best Regards.

[DanielExMachina]

EDIT: Figured it out!

[marc_a]

Hey @one_eyed_man,

Withdrawing the post means that the issue was already solved on your end! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

[DanielExMachina]

Yes, I managed to figure the rest of it out, thanks so much @ruenel for your help!

In case anyone reads this post in the future, these are the final settings I used to get my navbar elements vertically aligned and centered on both desktop and mobile:

Appearance > Customize > Additional CSS:

/*Vertically align logo in navbar*/
.ubermenu .ubermenu-item.ubermenu-item-2815 > .ubermenu-target,
.ubermenu .ubermenu-item.ubermenu-item-2815 > .ubermenu-content-block,
.ubermenu .ubermenu-item.ubermenu-item-2815.ubermenu-custom-content-padded { 
    margin-bottom: -31px; 
}

/*Remove navbar extra space*/
.x-navbar-inner {
    margin-bottom: -47px;
    margin-top: -13px;
}

/*Center submenu items on mobile and extend flyout to fill screen*/
 @media (max-width:959px) {
    .ubermenu .ubermenu-item {
         text-align: center;
    }
    #ubermenu-main-30-primary-2 {
        width:125%;
        margin-left: -12.5vw;
    }
    .ubermenu.ubermenu-submenu-indicator-closes .ubermenu-sub-indicator-close {
        margin-right: 4vw;
    }
 }	

Appearance > Customize > UberMenu [main] > Responsive Toggle Padding:30px 0px 0px 0px

Appearance > UberMenu > Main UberMenu Configuration > Miscellaneous > Content Before Menu:

<a href="https://YourWebsiteUrl" class="um-logo"><img src="https://LinkToTheLogoYouUploadedToYourSite" alt="My logo"/></a>

Appearance > UberMenu > General Settings > Custom CSS > Custom CSS Tweaks - Mobile:

.um-logo {
    display: inline-block;
    text-align: left;
    margin-top: 15px;
    max-width: 68px;
    height: auto;
}

Appearance > UberMenu > General Settings > Custom CSS > Custom CSS Tweaks - Desktop:

.um-logo {
    display: none;
}

Cornerstone > Theme Options > Headers > Top Height: 130px

[tristup]

Hi @one_eyed_man,

Glad that you have shared the solution with others.

Thanks