I have a logo embedded in the menu.
The menu items align to the right and top of the logo. I would like them to align to the bottom.
I have tried padding but it effects the secondary menu structure badly.
Also the whole area of the logo and menu seems to have too much padding for my needs and I have tried various padding custom css from forums to remove or minimise it to no avail.
The site is as a sub domain during construction.
Many thanks for any help.
Hi TSW 6240
Thanks for reaching out.
Try the following:
/* Logo */ header#masthead.masthead-logo-in-menu .logo { padding-top: 12px !important; padding-bottom: 0 !important; } /* Menu Items */ header#masthead .main-navigation ul li a { padding-bottom: 0; } header#masthead .main-navigation ul ul li a { padding-bottom: 15px; }We’re just putting the padding back to normal in that last selector. Let me know how it goes. Make adjustments as required.
Many thanks Andrew,
That has tidied the logo up. Is there any CSS to get the menu items down to base of the masthead and justified to the right?
Thanks.
Sure. That should have handled the menu, it does in my demo. We’ve set the bottom menu padding to zero. Try the following for that selector:
/* Menu Items */ header#masthead .main-navigation ul li a { padding-bottom: 0 !important; }If that doesn’t help you’ll need to try identify what’s stopping your menu items from reaching the bottom of the menu. You can use Chrome Developer Tool for that. Here is our overview:
https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
To right align the menu you can use the following:
/* Vantage right align the main menu */ .main-navigation ul { font-size: 0; text-align: right; } .main-navigation ul li { display: inline-block; float: none; font-size: 13px; } .main-navigation ul ul li { text-align: left; }Andrew
I have installed google chrome and not found anything. The only line that had some interest I retype below:
style=”position: fixed; width 382px; top: 0px; left: 0px; z-index:998; “>_
Should this be floating?
Vertical align seems to be baseline?
My novice eyes see nothing to say to align to top??
What could be stopping it aligning to baseline?
Thanks for giving that a try, no worries about using Chrome Developer. The menu isn’t vertically aligned, items take their alignment from padding. If adding !important didn’t work then it’ll be tough to proceed without viewing the problem live I’m afraid.
If I understand you correctly the Menu is padded down from the Top, and as I have placed the logo in the menu the only way to bring the menu down is to increase the top padding?
Is there a way then to limit the padding to the primary menu structure?
Is there a way you can check the code for this be it live or otherwise?
The menu is padded from the top and bottom. In the CSS I sent we removed the bottom padding. Sorry, really need to see this kind of thing live, inspect the source and advise changes from there. If you watched the Custom CSS video, that’s usually how we’re sending you snippets, inspecting the page, making edits live in Chrome dev and sending those through. If the site live but locked you can email us details on:
[email protected]
Sorry I thought I had entered the details on the form:
The new site is in a sub domain:
http://www.continentalsoiltechnology.com/fifteen
Any help much appreciated!
Sorry, I mis-read things. Ok, with your logo this size you’ll need to add top margin to menu items OR top padding if you want the hover to reach the top of the menu bar.
Try the following, replacing the previous menu focussed CSS:
header#masthead .main-navigation ul li a { margin-top: 51px; padding-top: 6px; padding-bottom: 6px !important; } header#masthead .main-navigation ul ul li a { margin-top: 0; padding: 15px 20px !important; }Perfect all sorted.
A true magician!
Many thanks for your help.
Win! Glad that helped.
All the best.