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.

reduce padding between menu and Hero image or slider

Resolved 8 replies customizationthemetheme-vantage
londonnet
10 years ago · Last reply by londonnet 10 years ago

Is there a way to reduce the gap between the menu bar and row containing a hero image or slider?

I suspect so with a custom css code can anyone share?

Thanks

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

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Alex S Staff 10 years, 12 days ago

    Hi Londonnet,
    By default there’s 50px of padding added to the hero image. Have you tried setting this value to zero? If that doesn’t work, could you please provide me with a link to your website so I can provide further instructions.

  2. londonnet 10 years, 12 days ago

    I have tried adjusting the pixel size but this has no affect. I would like to match the height of the slider on the front page too so whatever we do on hero pages we would nee to be able to do this with the slier as well.

    http://uvacity.com is the site

    Thanks

  3. Alex S Staff 10 years, 12 days ago

    Sorry for the delay.

    Okay. Based on your website it looks like you’ve tried to add a padding to the main container, and then forced it(the exact css being: padding-top: 35px !important; padding-bottom: 35px !important;). Did you manually add custom CSS or via the SiteOrigin CSS plugin? In other words, do you know about this?

  4. londonnet 10 years, 12 days ago

    Could be a set of custom css from a previous request.

    This is what I have set

    ins {
    background-color: #fcfcfc !important;
    }

    /* Vantage logo in menu padding */

    #masthead.masthead-logo-in-menu .logo {
    padding: 1px 0 1px 0;
    }

    /* Vantage Remove Logo in Menu img constraint */

    header#masthead.masthead-logo-in-menu .logo > img {
    max-height: 50px;
    }

    .home #main {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    }

    .layout-full .panel-row-style {
    padding-top: 0px;
    padding-bottom: 0px;
    }

  5. Alex S Staff 10 years, 12 days ago 
    .home #main {
padding-top: 35px !important;
padding-bottom: 35px !important;
}

    That’s causing the issue. Adjust padding-top; Lower means less, and higher means more space between the menu and hero image.

  6. londonnet 10 years, 12 days ago

    OK I have removed that and changed
    top and bottom padding to 1
    extra top padding to 1

    on the numbers page and it looks the same

    ins {
    background-color: #fcfcfc !important;
}
/* Vantage logo in menu padding */
#masthead.masthead-logo-in-menu .logo {
  padding: 1px 0 1px 0;
}
/* Vantage Remove Logo in Menu img constraint */
header#masthead.masthead-logo-in-menu .logo > img {
max-height: 50px;
}
.layout-full .panel-row-style {
     padding-top: 0px;
    padding-bottom: 0px;
}
  7. Alex S Staff 10 years, 12 days ago

    Okay. Sorry I should have been more clear in my instructions. Please revert to what you previously had and swap out the following:

    .home #main {
padding-top: 35px !important;
padding-bottom: 35px !important;
}

    With:

    #main {
padding-top: 5px;
padding-bottom: 35px;
}
  8. londonnet 10 years, 12 days ago

    Perfect. Thanks very much

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