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.

Help creating full width navigation menu in Vantage

Open 4 replies customizationthemetheme-vantage
patkhu
9 years ago · Last reply by Andrew Misplon 9 years ago

Hi,
I’ve done a bit of searching in the forums, and I’m not quite finding what I need. Site currently is at hillel.lisagoodgame.com.

We’re designing this as a full width site, but the navigation menu looks puny at the fixed width. I’ve tried to sort out CSS to change it, but I’m not having much luck. I know that Vantage doesn’t include a full width option for the menu, but is there anything I can do to make it so?

Alternatively, I’ve seen folks mention some plugins that can do this (like Max Mega Menu), so wondering if that’s another way to go.

Thanks!
Lisa

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

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Andrew Misplon Staff 9 years, 6 months ago

    Hi Lisa

    You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* Main Menu */
body.responsive.layout-full #page-wrapper .site-navigation .full-container {
	max-width: 95%;
}

    You might also need to install the SiteOrigin CSS Editor.

  2. patkhu 9 years, 6 months ago

    Thanks, it looks like that worked.

    I’m having a bit of an issue with the menu in mobile, however. Looking at it on Samsung S5 right now, and the word Menu is cut off in the middle of the “u.” Is there an option to not have “Menu” there at all and just have the hamburger, or can you help me with a snippet to get the mobile menu to fit within the portrait screen width?

    Thanks!
    L.

  3. patkhu 9 years, 6 months ago

    Ack, and one more related issue.

    The search icon is now way off on the righthand side of the screen on desktop, but when clicking on it, the search box opens wayyyy on the lefthand side of the screen. Are there any options for styling that differently? I’ve gone through the options in the Customize section, but not quite finding anything that affects that.

  4. Andrew Misplon Staff 9 years, 6 months ago

    You can try changing the previous rule to:

    @media (min-width: 680px) {
	/* Main Menu */
	body.responsive.layout-full #page-wrapper .site-navigation .full-container {
		max-width: 95%;
	}	
}

    It, unfortunately, isn’t possible to upload a new search icon at the moment.

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