This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Custom Menu to right in header-

Open 9 replies premiumthemetheme-vantage
Natalie Ray
10 years ago · Last reply by Andrew Misplon 10 years ago

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!

URL: http://www.jsinteriorinnovations.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 10 years, 7 months ago

    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.

  2. Natalie Ray 10 years, 7 months ago

    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

  3. Andrew Misplon Staff 10 years, 7 months ago

    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.

  4. Andrew Misplon Staff 10 years, 7 months ago

    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.

  5. Natalie Ray 10 years, 7 months ago

    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

  6. Andrew Misplon Staff 10 years, 7 months ago

    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.

  7. Andrew Misplon Staff 10 years, 7 months ago

    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.

  8. Natalie Ray 10 years, 7 months ago

    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

  9. Andrew Misplon Staff 10 years, 7 months ago

    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 :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread