Home>Support>reduce padding between menu and Hero image or slider

reduce padding between menu and Hero image or slider

By londonnet, 9 years ago. Last reply by londonnet, 9 years ago.
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].

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 5 months ago Alex S
    Hi, I Work Here

    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. 9 years, 5 months ago londonnet

    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. 9 years, 5 months ago Alex S
    Hi, I Work Here

    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. 9 years, 5 months ago londonnet

    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. 9 years, 5 months ago Alex S
    Hi, I Work Here
    .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. 9 years, 5 months ago londonnet

    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. 9 years, 5 months ago Alex S
    Hi, I Work Here

    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. 9 years, 5 months ago londonnet

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More