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.

Vantage Premium Logo In Menu Settings

Resolved 12 replies premiumthemetheme-vantage
TSW 6240
10 years ago · Last reply by Andrew Misplon 10 years ago

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.

URL: http://continetalsoiltechnology.com/fifteen

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

Need fast email support? Get SiteOrigin Premium

Replies

12
  1. Andrew Misplon Staff 10 years, 11 months ago

    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.

  2. TSW 6240 10 years, 11 months ago

    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.

  3. Andrew Misplon Staff 10 years, 11 months ago

    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;
}
  4. Andrew Misplon Staff 10 years, 11 months ago

    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;
}
  5. TSW 6240 10 years, 11 months ago

    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?

  6. Andrew Misplon Staff 10 years, 11 months ago

    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.

  7. TSW 6240 10 years, 11 months ago

    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?

  8. Andrew Misplon Staff 10 years, 11 months ago

    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]

  9. TSW 6240 10 years, 11 months ago

    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!

  10. Andrew Misplon Staff 10 years, 11 months ago

    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;
}
  11. TSW 6240 10 years, 11 months ago

    Perfect all sorted.

    A true magician!

    Many thanks for your help.

  12. Andrew Misplon Staff 10 years, 11 months ago

    Win! Glad that helped.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread