Hello. We are currently working to switch our website from a fully custom-built theme to the Vantage Premium theme. We have the majority of the page ready but have run into some problems in putting the final touches on it. I have tried configuring different theme settings and I have searched endlessly for some custom CSS to try to fix these issues but have had no luck.
1. Is there a way to reduce the space between the masthead/menu and the top of the pagebuilder page? This is mainly for the custom homepage but also for a few other pages on the site.
2. The menu is set to the correct position on the homepage but it is centered on all other pages. How can we keep it in the same position as the homepage on all pages?
3. Is there a way to change the font style/size of the menu items? Also, we have a drop-down menu and would like to change the vertical spacing between the items in the secondary menus.
4. When we create a new pagebuilder page to add to our site the margins and spacing are off. It looks like there are no margins and the sides of the page are off the screen. We need to add several pages but can’t because of this issue. Any suggestions on what may be causing this?
5. A main reason we are switching to Vantage is for the responsive feature. When we try to use mobile devices, the masthead/menu shows up in 3 lines and the banner on the homepage is very tiny and centered. Any ideas how we could fix this?
6. Lastly, several people in the office have tried to view the website using the same browser but the layout shows up differently on each computer. Do you know what would cause this to happen and how we can ensure the layout remains the same for everyone that accesses our site?
Thank you in advance for any help you can provide.
Hi Rashoemaker
Thanks for reaching out. Any CSS mentioned below should be pasted into the field at Appearance > Custom CSS:
1. The main container has padding on it to remove this for the home page:
/* Home */ .home #main { padding-top: 0; }To remove for all pages:
/* Main Container */ #main { padding-top: 0; }2. I’d need to see a link to find out what’s gone wrong there. From Vantage 2.3.4 it will be possible to center, left or right align the menu from the Customizer. For now you can use the following to center the menu:
/* Vantage center align the main menu */ .main-navigation ul { font-size: 0; text-align: center; } .main-navigation ul li { display: inline-block; float: none; font-size: 13px; } .main-navigation ul ul li { text-align: left; }3. Menu font size is also coming in the next premium version of Vantage. For now you can adjust with:
/* Vantage Set Menu Font Family and Size */ .main-navigation { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-style: italic; font-weight: bold; }Just delete any properties you don’t want to use above.
Vertical spacing for the menu is available at Appearance > Customize Menu > Menu Item Padding if you’re using Vantage Premium. If you are using Premium, please insert your order number when creating a thread so we can get to you sooner.
To set only the drop down vertical padding, try the following:
/* Drop down menu item padding, top and bottom */ .main-navigation ul ul a { padding-top: 10px; padding-bottom: 10px; }4. Please send a link to a page concerned. I’d need to inspect the source and see what’s going on.
5. The mobile menu is a feature of Vantage Premium. Go to Appearance > Vantage Premium to read more on the offer.
6. We can try work this with you but we’d need specifics. For example, “in browser X version X we noticed on the home page that the slider doesn’t have any bottom padding etc.”
Hope that helps :)
Hi Andrew-
Thanks for the response. I have tried these suggestions but I’m still having a bit of trouble.
1. Removing the main container padding works but there is still a bit too much space between it and the menu. Is there a way to remove padding from the bottom of the menu?
2. I have tried this code but it does not work. I have a logo in the menu which is left aligned and the menu items themselves are right aligned. This is how I want it but it only stays like this on the homepage. On the other pages, the logo is left aligned but the menu items move to center aligned. Any suggestions how to keep the menu items right aligned on all pages?
3. The font adjustment works but the vertical spacing of the drop down menu does not work. Yes, I have the Premium version. I have the menu item padding set to “0” and also tried the code but neither changes the vertical spacing.
4. I will send a private message with a link to this page.
5. I have tried several settings in Premium version to correct this problem on devices but nothing seems to change it.
6. In Google Chrome, version 41.0.2272.118, the home page banner is small and centered instead of spanning across the entire page. The rest of the page is spanning the whole width but there appears to be no margins and the information runs off the page.
Thank you for your time!
This is a private message.
This is a private message.
Thanks for the feedback. It usually starts to get a little tricky to track more than a few questions at once over several replies. Please send through login details, we can install a maintenance mode plugin and take a look at the site while logged in or just switch themes live, up to you.
Here is a maintenance mode plugin I like:
https://wordpress.org/plugins/wp-maintenance-mode/
Login detail request instructions below, thanks:
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Andrew-
We actually already have this maintenance mode plugin installed because of working on the live site. It is very important that nothing is done live,
as our clients access the page frequently and we can't have them try to access a half-working site. I would be happy to create a login. Please tell me what day/time you will be able to access the site. I will put the site in maintenance mode, switch the theme and pages before you access it and switch it back when you are finished.
Thank you!
I can take a look now if that suits you.
I can probably make that work. How long will you need?
Thanks :) Not long.
This is a private message.
Thanks :)
There is a lot going on here. Going on past experience it’s really challenging to work this many questions at once. Your Custom CSS contains selectors that are contradicting each other. Some of your Customizer settings like menu padding aren’t taking effect because they are being overridden in Custom CSS. For the fastest resolution I recommend this:
1. Remove everything in Custom CSS.
2. Check your site. Go back to Appearance > Customize and setup everything that can be controlled from there.
3. At that point let us know and we’ll very carefully add in the Custom CSS you require. Ideally in a short list, let me know the items you require, I’ll make sure everything is labelled and formatted correctly.
Once we’re done with the above we can re-look at the other open questions.
(Your mobile menu issue is potentially being caused by a plugin conflict. To resolve you’d need to temporarily de-activate all non-SiteOrigin plugins at once, check the menu, if it’s fixed, re-activate your plugins one by one until the menu breaks again, you then know which plugin is causing the conflict).
Thanks for taking a look. Before anything was added to the Custom CSS, I did setup everything I could from Appearance>Customize. Then, I reached out to Addo with a couple questions and he added the Custom CSS.
*Issues that Addo fixed with Custom CSS: *Making logo in menu a larger size, positioning the menu so the logo is left-aligned and the menu items are right aligned across the full width of the page.
*Issues that need to be addressed with Custom CSS:* Changing menu items size/fonts, adjusting padding of drop down menu items, adjusting space between bottom of menu and top of content section on all pages, menu alignment on all pages to match homepage.
These are 6 things I couldn't do through Appearance>Customize.
Super, let me line these up for you, from scratch rather. One moment, I’ll send everything through shortly.
Perfect. Thank you!!
Here we go. Try removing your current Custom CSS. You’re welcome to save that in a text file. Custom CSS also has revision history. Remove it all and replace with the following. You’ll need to adjust the values below for a few of the selectors.
/*-------------------------------------------------------------- Menu--------------------------------------------------------------*//* 100% width menu */body.responsive.layout-full #page-wrapper #masthead .full-container { max-width: 100%; padding: 0 2.5%;}/* Logo in menu - remove image constraint */header#masthead.masthead-logo-in-menu .logo > img { max-height: none !important;}/* Right align the menu */.main-navigation ul {text-align: right;}.main-navigation ul li {display: inline-block;float: none;}.main-navigation ul ul li { text-align: left;}/* Menu font family and size */.main-navigation { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px;}/* Set menu drop down padding only */.main-navigation ul ul a { padding-top: 10px; padding-bottom: 10px;}/*-------------------------------------------------------------- Page--------------------------------------------------------------*//* Adjust the main container top padding */#main { margin-top: -35px;}Sorry, one moment before you get started. Just need to make a quick fix.
Thanks. I’ve edited my above CSS. Please only copy it now, not earlier. A few small changes were made.
The only places you need to make adjustments are:
/* Menu font family and size */
/* Set menu drop down padding only */
Everything else should just do its job without any editing.
Great! Thank you very much. I won't have time until later this evening to make these changes but I will let you know how it goes. Thanks again for all of your help!!
For sure.
My plan is to get these changes made. Make any tweaks required. Once that’s done we can tackle the mobile menu issue and then after that tackle the page builder row stretch problem you discussed.
Chat soon. Thanks :)
I made the changes and the code seems to have fixed all of the issues but there is one small tweak we would like to make with the spacing. It seems that the spacing of the main menu is tied to the spacing of the drop down menu items. The main menu items are at the very top of the screen and the drop down menu items are very close together. When I change the padding to get the main menu where I want, the drop down menu items are very far apart. Is there a way we can make the main menu padding different from the drop down menu padding?
Super, glad we’re making progress.
In the Custom CSS I sent there was no selector for menu padding. That should set from Appearance > Customize > Menu. Then within Custom CSS the following was intended to be used to set the drop down spacing only:
/* Set menu drop down padding only */ .main-navigation ul ul a { padding-top: 10px; padding-bottom: 10px; }Did that combination not work for you?
The menu padding works from Appearance>Customize>Menu but it seems the
Custom CSS for drop down padding is not working. I've tried various times with different sizes and the padding does not change.
Please locate the selector in question in Custom CSS and add:
Final result:
/* Set menu drop down padding only */ .main-navigation ul ul a { padding-top: 10px !important; padding-bottom: 10px !important; }Perfect. That worked like a charm :) So you would like to move to the mobile homepage issue, correct? Please let me know how to proceed with that. Thanks!!
Sure. Things to check there would be:
1. Theme Settings > Navigation > Responsive Menu checked.
2. Theme Settings > Navigation > Mobile Menu Collapse Point must be greater than 480.
If the above is in place and the mobile menu still isn’t working, try testing it with all non-SiteOrigin plugins de-activated at once.
Both of those suggestions were in place. I should clarify – its not that the menu isn't working it is that the page isn't collapsing correctly. The menu is there but with very large text which is causing it to span several,
uneven lines. The banner at the top of our homepage is there but is very tiny and unreadable. The rest of the page is there and we have several page builder rows underneath each other to create a picture, title and caption layout but on mobile devices, those rows don't stay together and causes the layout to be all 3 pictures, all 3 titles then all 3 captions. Is there a way to modify how the page will look when collapsed to a device?
Almost everything you’ve described is normal responsive behaviour. Let me go through it quickly:
1. The menu on three lines is how it looks when the mobile menu doesn’t fire. I remember seeing this when I was logged in. De-activating plugins would be a good place to start this check.
2. Meta Slider handle’s it’s own responsive behaviour. The slider getting smaller is normal. If your text is in the same image as your background you might consider rather using our layering method which we outline here:
https://siteorigin.com/vantage-documentation/slider/. That will help with mobile.
3. Horizontally stacked rows will drop down to vertically stacked for mobile.
To turn off all responsive behaviour for mobile, go to Theme Settings > Layout and un-check Responsive Layout. This change won’t be evident on desktop if you drag your browser window size but it will cause the site layout to remain fixed for mobile.
Thanks for the suggestions. I think for now, it works best for us to turn off the responsive layout. I think the last thing that needs corrected is the page builder row stretch problem for new pages. Would it be easier for you to log in to the site or is there some settings that I could try first?
Thanks for the update. Sure, if we could login and take a look, that would be easiest. Instructions below:
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
rashoemaker, do you mind if we see your site? Its always impressive to see what folks are churning out with vantage theme.
Hi Wirox Integrated
A showcase is definitely a todo item on our list. I think @rashoemaker might be working on this project with maintenance mode up so I’m not sure he’ll have a public link available for little while.
Ok.
Wirox-
We are implementing the new theme offline right now. When it is up and running, I would be happy to provide a link.
Andrew-
Could you let me know a time that you are available? Would 1:30pm work? (3.5 hours from now)
Sure, I’ll make sure I’m available then.
You’ll notice how the rest of the page under the banner is cut off the page when I have it set to “Full Width” and “Full Width Stretched”. This happens with any new page when the Vantage theme is applied.
So to confirm, are you referring to the Full Width page template? Or are you referring to row layout settings in Page Builder?
Thanks
ok rashoemaker
Perfect. The full width page template is fine, I think. But in order to get the information on the page to go full width, I have to change the row layout settings in Page Builder. If I have the Full Width page template set, and leave the page builder row layout at normal, the information does not span the entire width. If I have the Full Width page template set and choose Full Width or Full Width Stretched for the page builder row layout,
the information bleeds off the page on both sides.
Andrew-
My meeting ran a little late. I’m logging on now to switch it to maintenance mode. Sorry for the delay!
This is a private message.
Thanks, taking a look right now.
If you’re online, please could you bump our account so we can view pages in the admin. Thanks.
It is fixed – sorry!
Thanks :) One moment.
On this page: http://ecpowergroup.com/autolion-vantage/, there is a Visual Editor widget below the two buttons. One option, which I’ve tested there is to edit the widget, click Layout and add padding. I added 50px there as an example.
Full Width Stretched is usually used for things like a Slider or big image, as a result there isn’t any default left right padding.
You could also do this. Edit any row, click Atttributes, enter a CSS class name of your choice:
Then go to Appearance > Custom CSS and target that class:
.custom-row-padding { padding-right: 20px; padding-left: 20px; }Okay. I'll give it a try and let you know how it goes. Did you have a chance to see the menu? The custom CSS you gave me worked great until I logged on on a different computer. Now it is back to being centered.
Sorry, no, I missed that. Is that perhaps a caching issue?
It could be. How would I go about fixing that?
If you have a WordPress caching plugin running, clear that, alternatively, it might be a browser caching issue. Try a new browser on that machine or perhaps clear your current browser’s cache.
Andrew-
The row padding works. Thanks for the suggestions. It seems I’m still having an issue with the menu CSS after logging into the website on a different computer. I did not have a caching plugin and I have cleared my browser’s cache. The menu logo & items are both centered, even on the homepage now. What should I do to get it back to the logo left aligned and menu items right aligned?
Sorry to hear you’ve run into a hassle with this. If it’s not mission critical we could perhaps wait until you’ve gone live. It would be really easy to inspect and correct then. We’re always keen to help out as much as possible; arranging a time to view the site for each challenge might become a little time consuming for both of us though. If we could view this when the site is live, that would ideal.
I understand your concern and really appreciate all of your help.
Unfortunately, we can't make the site live until it passes board approval,
and for that we need it to be 100% complete. It looks like everything else is ready to go except this menu issue. Is it possible to help correct this issue as a final step?
Oh dear, that’s a little more formality than we’re used to. But I do understand.
How’s your day looking? Keen to shoot for the same time as last time to move it into maintenance mode? I think that was 1:30pm for you and 7:30pm for me.
Or I could check now if that works for you?
Great! Now would be fine. Give me about 5 minutes to set it up please.
This is a private message.
On it. Thanks.
It should be fixed now. I can’t see though because your caching plugin needs to be cleared. Give it a try. Thanks.
Yes, it is fixed. Thank you! Can I ask how you fixed it? And would you recommend using a caching plugin? I just recently installed it.
Super.
The first CSS snippet in Custom CSS was using the body class .responsive-layout. Having turned that off you no longer had that class in the body tag which meant that rule wasn’t taking effect.
Sure, caching plugins are great. Just have to be mindful of them. If you’re working on the site and not seeing changes, you know what the cause is.
Great! Thanks again for your help in getting our site up and running! Your customer service has been excellent and I am very pleased with your product!
For sure :) Glad we could help out.
All the best.
how to remove the title from the header image without affecting the blog’s title that appears on the browser?
Sure, please try both or one of the below:
/* Remove post titles on blog and archive pages */ .blog article.post .entry-header h1.entry-title, .archive article.post .entry-header h1.entry-title { display: none; } /* Remove post titles on single posts */ .single article.post .entry-header h1.entry-title { display: none; }