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.

Header logo, white space padding on left and right sides

Open 1 reply themetheme-vantage
11 years ago · Last reply by Andrew Misplon 11 years ago

Hello Vantage Support,

I saw on the forum the post about: “Aligning masthead-logo-in-menu” to change the padding horizontally, and the code used to change it. For some reason on Chrome, and Safari I can’t get the header (logo) image to scale the same size of the website when I cmd/ctrl plus or minus.

I used the code suggested in the CSS & Javascript Toolbox Plugin, as I don’t have Premium yet. (Is it possible to just use the css code into the Appearance>Editor?)

/* Menu Padding Horizontal */

.main-navigation ul li a {
padding-right: 0px !important;
padding-left: 0px !important;
}


A friend of mine was viewing the front page of my site via your theme and they said it was centered and would scale the same size as the body.

I cleared browsing data, and tested the site on both Chrome and Safari, but it isn't working.

Any help would be of great value. Thanks!

URL: http://coldwhitefire.com

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

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Andrew Misplon Staff 11 years, 3 months ago

    Hi

    What I’d suggest doing for the full width Vantage Layout is inserting your logo’s background via Appearance > Customize > Page: Masthead Background. This is a premium feature. And then uploading your logo via Theme Settings > Logo and ensuring your logo has a transparent background. Saved as a PNG. The masthead background will automatically be 100% width.

    If you’d like to stick with Vantage Free you can upload a masthead background using Custom CSS inserted into a Custom CSS plugin:

    /* Masthead Background Image Cover */

    header#masthead {
background-image: url("paper.gif");
background-repeat: no-repeat;
background-position: center center !important;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

    Remove all the lines that say cover and fixed if you don’t want the background to auto cover. You’ll need to replace paper.gif with your background url. You can get that after uploading it to the media library. Just click on the image and find the url in the right column.

    To summarise. I’m saying separate your logo into two images and use the masthead background image for the one and the logo field for the other.

Please log in to post on our forums. Signing up is free.

Have a different question or issue?

Start New Thread