Hi. I recently purchased Vantage Premium and I love it. It really helped me put together a much better looking site than our current one and was easy to use with the combination of Page Builder. Thanks!
I am currently rebuilding our site in a test location here ( http://216.26.128.75/ ) before I released it to production.
I wanted my header to have our logo on the left hand side and the menu on the right. So I added a custom menu to the Header widget. This looks the way I want it to and is working really well except for one issue I am hoping you can help with.
The issue revolves around responsiveness of the menu I think. There appear to be three ways the menu is displayed:
1) To the right of the header logo as you would see it on a decent sized desktop/laptop display window.
2) Centered under the Logo (logo is centered in the screen as well) as I see it on my smart phone when viewing in landscape mode.
3) A mobile navigation menu as I see it when viewing on my smart phone in portrait mode.
The problem seems to be the transition between #1 and #2. If I view the site on my laptop and slowly resize the window the menu begins to overlap the header logo. At some point it eventually switches to view #3. Is there a way to control the point at which view #3 is displayed to prevent the menu from overlapping the header logo?
I tried adjusting the “Mobile Menu Collapse” setting of the theme, but I have to make it so wide that it seems to eliminate view #2 almost entirely.
The size of my normal logo is 347×70. The retina logo is 694×140.
Thanks!
URL: http://216.26.128.75
Ooops…one mistake in my post in this paragraph…it should read as follows….I am interested in controlling when it switches to view #2. view #3 appears to be controlled by the “Mobile Menu Collapse” setting.
“The problem seems to be the transition between #1 and #2. If I view the site on my laptop and slowly resize the window the menu begins to overlap the header logo. At some point it eventually switches to view #2. Is there a way to control the point at which view #2 is displayed to prevent the menu from overlapping the header logo?”
Hi Scott
Please try the following under Appearance > Custom CSS:
/* Vantage Header Mobile Breakpoint */ @media (max-width: 960px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }All you need to experiment with in the 960 figure at the top. That’s the breakpoint, you can set it as required.
Hope that helps.
(Ref: https://siteorigin.com/thread/header-layout-how-to-dilemma/)
That did it…thank you!
Awesome, glad that helped. All the best.