We have been using Vantage Premium on our site for about 2 months now and were just made aware of a problem. The site displays appropriately when viewing in a normal browser window but if you “Restore Down” (say to look at multiple browser windows at the same time) the display becomes incredibly jumbled. It only seems to happen with 1 page but the main menu on every page gets messed up. You can reference what I’m talking about by visiting our “AutoLion Homepage” at the link provided. Any help would be greatly appreciated.
Display Problems
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Rashoemaker
Please confirm that the responsive menu is activated at Appearance > Theme Settings > Navigation.
Other challenges relate to customisations made.
.custom-row-padding { padding-right: 100px; padding-left: 100px; }The above class has a negative impact on smaller screen devices. One way of handling that would be to drop the class below a certain resolution:
@media (min-width: 780px) { .custom-row-padding { padding-right: 100px; padding-left: 100px; } }Adjust as required.
Hope that helps.
Hi Andrew-
*The responsive menu is not activated because when we first set up the site, we determined that some parts of our site work/look better without responsive. Is there another way to manually target just the menu for desktop devices?
*For the page itself, I added the code above to drop the class below a certain resolution, cleared my cache and it worked. But, when I made another change on the website, it stopped working. I tried to convert back to edit in which it worked but no luck. Any suggestions why it worked for a bit until I made another change? Thanks.
Mmm, ok I understand. Have you tested Responsive Layout OFF and Responsive Menu ON on a mobile device? Does the responsive menu still appear even with the mobile layout de-activated?
Yes, the responsive layout still appears when the mobile layout is deactivated.
I’ll look into that now.
Your custom row class is working as I’d expect. Please indicate the row that it’s not working in. Thanks.
(Do you have a use case in mind where desktop users would need to see the mobile menu? Usually it’s just developers resizing their browser. Have you ever seen a user do this?).
I took a look at displaying the mobile menu on desktop with the setting off. It’s possible but unfortunately outside the scope of what we can currently assist with. https://codeable.io are our recommended developers for custom development tasks like this.
For the page layout issue, it is row 63.
As for the menu, I think there is some confusion. It is working how we want it to on mobile devices. The problem is when a desktop user has multiple windows open (so the site is not full screen) the menu items wrap around to
2 or 3 rows, depending on the size of the window. It is not like this on mobile devices where the screen size is much smaller and we would like the desktop to look the same as the mobile device screen when it is not full screen.
This is an issue for our users because many times they need to access information on our site while simultaneously working in another window.
Try adding the following to Appearance > Custom CSS to help the menu:
/* Layout */.layout-full #page-wrapper .site-navigation .full-container { width: 1080px !important;}For the custom Page Builder padding class I’m asking which row in Page Builder is it not working on. Is it on the home page? What content is in the row so I can find it? Have you applied the class to the row and it’s not working?
It is our AutoLion homepage (www.ecpowergroup.com/autolion-2/) and all information under the slider. Yes, I have applied the following custom-row-padding to the row and it worked when I first applied it but not since I have updated another page on the website.
/* Add row padding*/
@media (min-width: 480px) {
.custom-row-padding {
padding-right: 100px;
padding-left: 100px;
}
}
If anything I’d increase the min-width. It’s working right now. Try this rather:
@media (min-width: 1024px) .custom-row-padding { padding-right: 100px; padding-left: 100px; }That means that your rows will only get 100px padding left and right on displays over 1024px wide.
Perfect. That fixed it.
I tried adding this code and it did not work but I already have something similar (that you helped me setup before our page was live to make the menu full width) and I think that may have something to do with the problem.
Here is the code I currently have:
/* 100% width menu */
.layout-full #page-wrapper #masthead .full-container {
max-width: 100%;
padding: 0 2.5%;
}
Is there a way we can modify this to shrink the text and keep the menu on 1 line when the window in restored down?
Cool :) Glad to hear you’ve made progress.
Just a quick heads up. We don’t officially offer customisations. We do our best to help out with small ones. I’m sure you’ll agree we’ve done a fair bit on your site. What we’re facing here is one of the challenges of customisations. We customised the header, now we need to try customise the customisation to make something else work. Just letting you know so that you know where we are. Ideally you’ll need the help of a developer to make further changes of this nature.
What you need to do is convert your header size into a static size after a point:
@media (max-width: 1024px) { .layout-full #page-wrapper #masthead .full-container { max-width: none; width: 1080px; } }Andrew-
I do appreciate all of your help. This does seem to be doing the job (but may need some tweaking) so thank you very much!
For sure :) Hope you’re able to make progress.