How to Work Spacing

[Dearden]

Hello Team,

I am struggling working with my spacing. My website is www.exploreyourleadership.com.

For pages past my landing page, I am having a hard time with getting banner to display correctly. For example, “Chart Your Stars” is partially hidden under the top navbar.

Also related to spacing, is there a way to use code to delete the white space between the page title (like “Chart Your Stars” and the first slider. Would like everything to stack up together next to each other (in a vertical way, on item right above/below one another).

Thank you for the help.

Kind regards,
Brady

[Prasant]

Hello Brady,

Thanks for asking.

Please add following CSS under X > Theme Options > CSS:

header.x-header-landmark {
    padding-top: 50px;
}

.x-slider-container.below {
    margin-top: 47px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[Dearden]

Thanks for the help.

1. Code works great to bring down page banner from farther underneath the navbar. Thanks!

2. I cut out the second part of the code. Not sure what it does:

.x-slider-container.below {
margin-top: 47px;
}

3. How can I move my current top slider on some pages (such as https://exploreyourleadership.com/outfit/) up against the page banner. I want to move the slider upwards and cut out the white space. I tried experimenting in different ways with the code above, but I wasn’t able to work it. Any recommendations?

Thanks much!

Brady

[rad]

Hi Brady,

Glad it works, you can remove the second one. It functions the same as the first, except it’s the slider being moved and not the header.

As for the 3rd, please inspect the section where the slider is, then set its padding to 0px, it’s currently set to 45px. Then change your page templates to Blank - No Container | Header, Footer.

Thanks!