I have a Pro header with a Ubermenu integrated. No matter what I’ve tried, I’ve not been able to get it to be responsive. It is set for desktop/laptop viewports only, but gets cut off and doesn’t scale. I have a logo inline to the left of it. I want to have the logo stack on top of the menu when the viewport is too small to contain both the logo and menu. The current legacy menu top level links will wrap and scale until the mobile break point is reached.
Hello @ehsd,
Thanks for writing in! I have checked your site and I am seeing this:
Be advised that Ubermenu has its own responsive settings. Please check this out:
Best Regards.
That is the current Pro legacy menu. I must have forgotten to include a link to the test page with the new header assigned. The desktop/laptop breakpoints use a raw content element housing the Ubermenu shortcode. This raw content element does not scale and the links are cut off and not accessible. The legacy menu uses a existing Ubermenu enhanced menu that have been in use for several years.
I added a secure note with a demo page where the Pro header with the integrated Ubermenu can be seen.
Hello @ehsd,
"I want to have the logo stack on top of the menu when the viewport is too small to contain both the logo and menu. "
You will have to edit your custom header and change the Flexbox > Direction of the Container and the Bar element responsively.
Inspect the Bar element (Do this on the Container element as well) and find the Flexbox option to find the Direction settings. Click the word “Direction” to launch the Responsive Styling. If you are not familiar with the Responsive Styling yet, please check out this documentation first:
Hope this helps. Kindly let us know how it goes.
Hello,
Both the bar and container are set to center in the Flexbox settings. Flexbox direction is set to vertical. The menu still gets cutoff on the right. This menu is only active for laptop/desktop breakpoints, so adjusting responsive styling is unnecessary.
The bar has global container turned off for content sizing (see screenshot below), and there is a height assigned to the bar (under setup in the inspector) of 100px. If I set the height to auto I do get the logo stacked on top of the links, but at all viewport sizes. I’m looking to replicate the current legacy Ubermenu inside of the Pro header. The top links in the Legacy menu wrap to multiple lines until hitting the mobile break points. Maybe there’s another setting in the bar/container I’m missing, but no matter how I set the flexbox options, the top links are cut off.
Hello @ehsd,
To better assist you with your issue, can you please provide with us your WP credentials so that we can check your settings? You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Thank you in advance.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.