I am using Vantage Premium and I want to add a custom menu to the right of my logo. I’ve tried many different things via searching for Custom CSS and nothing seems to be working. I want my Home | Contact menu to be to the right of my logo and I want an image to be to the left, without all of the extra space. Help!
Custom Menu to right in header-
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Natalie
Thanks for reaching out.
Are you looking to keep your logo center aligned and still have a menu widget to the right of the logo? This might be possible but it’s not a default Vantage feature. The header widget area is one area so if we move it to the right of the logo the image you’ve added would have to be moved with the menu.
Hi Andrew,
Thanks for getting back to me — Yes, I want to do the menu widget to the right of the logo. When I upload the Logo through Theme settings it creates too much padding, but when I upload it through customizer it doesn’t allow me to put the menu to the right or an image to the left of the logo. I’m just not sure what more I can do or if it’s even possible. Any help would be greatly appreciated
Header padding can be set from Appearance > Customize > Theme Design > General > Header Padding.
The Vantage header offers the following options, anything more would require some custom coding.
1. Left positioned logo with right positioned header widget area. The header widget area is right aligned.
2. Center logo (Customize > Theme Design > General > Center Logo) with widget area under the logo.
3. Logo in Menu (Appearance > Theme Settings > Layout > Layout Bound). This option has no header widget area.
Hope this helps explains what Vantage can do in terms of header layouts.
Part of the padding is coming from your logo. If you trim your logo transparent space away it will resolve that.
One option is to make your logo a bit smaller. Have it on the left and then put your extra image and menu widget to the right in the header widget area.
Hi Andrew, I actually figured it out somewhat. Thanks for your help. Can you also tell me how to make my site completely mobile friendly? It runs normal on an iPad, but not on my phone. Thanks
There are lots of empty columns for spacing so this gets super tricky on mobile as it all collapses or tries to. Let me see what I can do to help. The Layout Widget is kind of a miracle in it’s own right. It’s not really meant for this area.
Please keep in mind that at the start of the thread I laid out the default Vantage header options. We’re now working with a setup that is quite far from any of those recommended/default header options. The easiest way I can think to resolve the pretty complex setup in the header is as follows:
@media (max-width: 1195px) { #masthead .hgroup #header-sidebar .widget_siteorigin-panels-builder .panel-grid { display: none; } }Insert the following at Appearance > Custom CSS. It’ll cut everything below 1195px leaving just the logo. It’s a clean, simple solution. You’re welcome to adjust the media query down to say 1024 or 768px. 1195 is where things start to go wrong which is why I set it there.
So, I should use that code for my my header? Also, Is there something I can do so that my site formats on all different screens? For instance, I am making this on my macbook 13″ screen (Fairly small) but my monitor at work is a 24″… so it doesn’t look the same as it does on my iPad or mac
Yes. Please try the CSS I sent in Custom CSS. It will clean the header up below 1195px. Insert the Custom CSS at Appearance > Custom CSS, save and then re-size your browser to see it in action.
When you say the site doesn’t look the same, please send through a little more feedback on what you’re looking to improve and we’ll do our best to help.
Thanks :)