I have been trying to put a centered logo in the middle of my menu items. Is there any way to get it to center both vertically and horizontally without using custom CSS? Also, when I resize down on screen size it gets smaller and left aligns oddly. Anything I can do to get a better responsivity? Thanks.
Hi Kensie,
Thank you for reaching out to us. There are couple of techniques you can use to center a logo within a menu as per their official documentation. Please follow the one that suits you https://sevenspark.com/docs/ubermenu-3/content/images/logo#center
Hope this helps!
I have followed those exact docs, but I’m still having trouble centering. You can see here: http://g2j.8a9.myftpupload.com/
Hello Kensie,
Your logo seems aligned to the center already.
You maybe experiencing site caching. Kindly clear all your plugin caches and purge your site cache as well. Perhaps this documentation may help:
Hope this helps.
Hey there, thanks for the reply, I got it really close on my own, but it is still resizing so weird. If you drag the screen down to around 1000, it gets smaller and left aligns even though I have it set to center. Thoughts?
Hey Kensie,
I checked your menu and there are some settings you need to change. First remove the negative margin from the logo menu item which is causing the issue in smaller screens. Change the width of the menu items from 11.11% to 185px
Remove the Menu Bar Margin Top or set it to 0 in Uber Menu settings:
I coudn’t find the Flexbox setting to vertically align the menu items so for that you probably need to add the custom CSS for that:
.ubermenu-horizontal.ubermenu-items-align-flex .ubermenu-nav {
align-items: center;
}
Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
By following the above steps you should have the centered responsive logo in all resolutions. Hope this helps!
Thank you so much. This is the only part I am having trouble with, where do I change this? I only see the option for fractional options, not sure where I can set a static px amount.
Hello Kensei,
The 11.11% is the percentage width set by the plugin since you have 9 columns. You may need to set the item width to Automatic or Natural. You can check out this documentation:
Hope this helps.
Hey Kensie,
According to their documentation, this can be done either by changing the column width (see https://sevenspark.com/docs/ubermenu-3/layouts/menu-item) or using custom CSS:
As explained by Runel, this width of the column is set by the plugin according to the number of columns so to set the fixed width, you would need custom CSS:
.ubermenu .ubermenu-nav .ubermenu-column-1-9 {
width: 185px;
}
However i checked your site and your logo is responsively centered all the way so if you leave the width as is, you should have no issues.
Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.
Hope this helps!
Thank you thank you thank you. Worked like a charm, you’re the best 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.