Reducing the gutter/gap below the header

  • Resolved R-Nation

    (@r-nation)


    9 years, 5 months ago

    Ben,
    I am getting SO very close to what I want. The previous issues have been resolved except for the following:

    I originally had a CSS to reduce the gutter/gap below the header. Now that I have the header completed, it’s frozen, it has the right color, and I can see all the words correctly, the following code does not work:

    }
    .main {
    padding-top: 0;
    }
    .sidebar-primary-container {
    padding-top: -0 !important;
    }
    .breadcrumb-trail {
    padding-top: 0.75em;
    padding-bottom: 0.75em;

    I am thinking it’s because the header scrolls. Is there a way to reduce that gap so the content is closer to the header?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    When the menu is in a fixed position, the body element will have margin added above it. It will adjust to maintain the same space based on the height of the header.

    To override it, try the following CSS:

    @media all and (min-width: 50em) {

  body {
    margin-top: 3em !important;
  }
}

    If you want to further reduce the space between the header and main content, try switching the value to “1.5em”.

    Thread Starter R-Nation

    (@r-nation)

    Resolved! This worked great. Thanks Ben.

    Theme Author Ben Sibley

    (@bensibley)

    Great!

    If you’re happy with Ignite, could you take just a minute to leave a review? I would really appreciate it.

    Thanks!

    Thread Starter R-Nation

    (@r-nation)

    Ben has been extremely helpful and timely, which is greatly appreciated. For those of us who don’t want to become experts in CSS but able to maneuver to create what we envision, this support is invaluable. Sometimes it takes a couple of tries, however, I’ve learned so much. And, I will continue to learn as this will be ongoing thanks to the great support Ben.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Reducing the gutter/gap below the header’ is closed to new replies.