Hi,
I am new to WordPress and new to the Vantage theme (although I’m loving it so far). However I am having a few styling issues that I hope someone may be able to help with.
1) How do I enlarge the logo in the mast header to make it more prominent. I have resized it but makes no difference, this seems to be the default size. Anything I can do in Custom CSS?
2) How do I “centre” the menu titles? This is probably obvious to those in the know.
3) and finally, on the meta slider, I have resized the image to the correct size (1080×420) but there seems to be further cropping on the image.
Any help would be greatly appreciated
TIA
Hi Daniel,
Would you mind deactivating the maintenance mode so that I can test the CSS before giving a custom solution for your site.
Let me know when this is ready.
Looking forward to hear from you.
Hi Addo,
So sorry about that. This has now been deactivated.
Many thanks
Daniel
Hi Daniel
Perhaps email us a set of temporary login details so we can view the site. You can do this using the following email address: [email protected]. Your message will be visible on this thread but only to you and our staff. Once we have access, I’m sure we’ll be able to help.
This is a private message.
Just sent a username and password
Thanks.
1. When using the Logo in Menu masthead layout, Vantage constrains the logo. If you’d like to remove that constraint and let your logo render at the size you upload it, please try the following under Appearance > Custom CSS:
/* Vantage Remove Logo in Menu img constraint */ header#masthead.masthead-logo-in-menu .logo > img { max-height: none !important; }2. To center the menu, insert the following under Appearance > Custom CSS:
/* 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. Try the following under Appearance > Custom CSS:
/* Vantage Theme, remove max width/layer centering. Usage: Copy and paste this code into Appearance > Custom CSS or your own Custom CSS module. */ body.responsive.layout-full #page-wrapper .metaslider .full-container, .layout-full #page-wrapper .metaslider .full-container { max-width: none; }Hi Andrew,
Thanks so much for coming back to me.
1) It changed but went supersize… just want it to stand out more than it does, is there a way to allocate a size to the logo using custom CSS?
2) Worked a dream, thank you so much
3) Didn't make any difference, image still is cropping itself, I have attached the image as it should look…
This is the Custom CSS as it looks now:
/* 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: 20px;
}
.main-navigation ul ul li {
text-align: left;
/*
Vantage Theme, remove max width/layer centering.
Usage: Copy and paste this code into Appearance > Custom CSS or your own
Custom CSS module.*/
body.responsive.layout-full #page-wrapper .metaslider .full-container,
.layout-full #page-wrapper .metaslider .full-container {
max-width: none;
}
Thanks so much
Just seen the image hasn’t attached… Can I send it over another way?
Thanks for the feedback.
I change your logo CSS to look like this:
/* Remove Logo in Menu img constraint */ header#masthead.masthead-logo-in-menu .logo > img { max-height: 35px; }You can adjust 35px as required.
I changed your slider CSS to look like this:
/* Remove max width/layer centering */ #page-wrapper #main-slider .full-container { max-width: none; }If that doesn’t work for you, you might consider removing the stretch setting at Appearance > Theme Settings > Home > Stretch Home Slider.
It’s unfortunately not possible to email in an attachment to the forum just yet. Sorry.
I moved your Custom CSS to our theme location, Appearance > Custom CSS. If you want to move it back to Simple Custom CSS there shouldn’t be any problems, it’s just easier for me to see the Custom CSS in your page source code when it’s saved at our theme location (Appearance > Custom CSS, the non-Simple Custom CSS one).
Hi again Andrew
Thanks again so much for all your help and expertise. It really is appreciated.
Sorry, just one more question if i may… so i'm happy with the size of the logo and the size / position of the menu text but they're not lined up, ie level with other… this is also affects the way it is displayed on mobile.. can this be rectified?
Many tanks
Sure, try the following under Appearance > Custom CSS:
/* Menu Padding */ .main-navigation ul li a { padding: 30px 35px; }The first value represents top and bottom padding.
To turn your mobile menu on, head to Appearance > Theme Settings > Navigation and check the Responsive Menu setting.
Hi Andrew,
I’m afraid this hasn’t worked… I copied and pasted the css but nothing has changed either on the main site or the mobile site.
Any further help would be greatly appreciated…
Kindest regards
Daniel
Please try the last bit of CSS I sent at the very top of your Custom CSS. To handle your mobile menu please try my suggestion:
“To turn your mobile menu on, head to Appearance > Theme Settings > Navigation and check the Responsive Menu setting.”
Hi Andrew,
the main site has now changes (awesome…) but the mobile site still isn’t right (shame I can’t send you a screen shot).
I have been into Appearance / Theme Settings / Navigation and the Responsive Menu option is ticked.
Any help would be greatly appreciated.
Kindest regards
Please head to Jetpack > Settings and make sure that you don’t have Mobile Theme activated. De-activate it if you do. Thanks.
Hi Andrew,
I just checked and Mobile Theme wasnt activated in Jetpack….
Thanks. Please head to Appearance > Theme Settings > Navigation. At the bottom is the mobile menu breakpoint. That’s on zero right now, that’s the problem, set it to 680 for mobile.