Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello, I have tried to adjust the cutom css settings for the logo in menu doing the following.
/* Vantage Remove Logo in Menu img constraint */
header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}
I have also adjusted the height of my Logo to be 60 pixels.
I am still seeing the space above and below.
Hi cjrmdg
The CSS you have is correct, that’ll just let you decide your own size for the logo in this layout option. To set your own padding there try the following:
header#masthead.masthead-logo-in-menu .logo {padding: 12px 0;}12px is for top and bottom. Set that to zero and see the change.
Hope that helps.
Hi Thanks Andrew for help. I did the change for CSS and actually took it to 0px 0 and it just moved my logo to the top of menu bar. I am trying to get my logo to take up the complete menu space.
Here is change when I set it to zero.
http://www.mydeviceguide.com/
It looks to take up the entire menu space on my side. Is this not what you see?
No, on my browser (Chrome) it just moves the logo to the top of Menu and the bottom of logo is parralel with the bottom of the words. Ideally I would like words to stay centered where they are and have the logo take up all of the vertical space.
Oddly, I checked the site in Mozilla and it brings up site initially but once page loads it brings up a VERY large image of logo.
Can you perhaps try clearing your cache in Chrome or viewing Incognito. On my side it looks good.
Hi Andrew, not sure what is happening. I cleared all history in Chrome and Mozilla including cache. Even restarted PC and it is still showing up the same.
Chrome= logo is pushed to top of menu with space below
Mozilla=Page loads with extremely large logo.
Any help would be great!
Also tried opening in Incognito as well and it looked the same
To sort out Firefox try changing your previous CSS on logo image size to the following:
header#masthead.masthead-logo-in-menu .logo > img { max-height: 60px !important; }Ensure your remove the selector you pasted in your initial question so we don’t have competing code.
Try changing your last selector to the following:
header#masthead.masthead-logo-in-menu .logo { padding: 0 !important; }Finally, you can set menu padding in the Customizer or Custom CSS, here is the CSS:
.main-navigation ul li a { padding-top: 20px !important; padding-bottom: 20px !important; }That’s top and bottom menu padding. Try controlling things from there and see if it helps.
OK, thanks. That actually fixed the Firefox problem and logo is showing like you see on your end.
However in Chrome (browser I use most) it is still showing up the same unfortunately.
I inserted the last code into Custom CSS and it still is looking the same in Chrome. I adjusted the bottom number to 0 to see if that fixed it, but it just removed all padding from below words too.
Tried clearing cache and re-opening and it still looks same.
I tested now on a Windows 7 machine – Chrome and see the same setup as my screenshot snippet that I posted earlier.
As far as I can see all of the menu padding comes from two places, the logo padding and the padding top and bottom for the menu links. We’re controlling both.
Is your browser zoom set to 100%?