Moving down the grey horizontal line on the header

Resolved oliviamarchi1
(@oliviamarchi1)

4 years, 10 months ago

Hello!
I’m using Sketch on my site and I chose not to use the Portfolio page as the homepage. So, the homepage is just a regular page with a header image and some information below.
You can see that the standard horizontal grey line is up there between the logo/menu space and the header image.
What I’d like to do is move up the header image a bit (to be positioned where the grey line is now) and bring down the grey line so that it separates the header image from the text.
Can this be done with CSS for the homepage only and keep the line as it is in the other pages? I found a code to remove the line, but it isn’t what I need.
Thanks a lot!
Olívia

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Gemma Evans
(@gemmaevans)

4 years, 10 months ago
Hi @oliviamarchi1,

Sure, this CSS can be used to remove the border from the header and add one to the top of the content (on the homepage):
```
.home .site-header {
    border-bottom: none;
}

.home .entry-content {
    border-top: 3px solid #eeeeee;
    padding-top: 20px;
    margin-top: 20px;
}
```
Hopefully that does the trick!
Thread Starter oliviamarchi1
(@oliviamarchi1)

4 years, 10 months ago

Hello @gemmaevans!

Thanks a lot for that. It did do the trick 😉

Is there a way to move the header image up a bit?

Thanks again!
Olívia
Gemma Evans
(@gemmaevans)

4 years, 10 months ago
Hi Olivia,

You’re welcome! I’ve added some extra CSS and that should reduce the amount of space under the header:
```
.home .site-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.home .entry-content {
    border-top: 3px solid #eeeeee;
    padding-top: 20px;
    margin-top: 20px;
}
```
Is that better?
Thread Starter oliviamarchi1
(@oliviamarchi1)

4 years, 10 months ago

That is perfect, Gemma! Now it looks just like I wanted it to.
Thanks a lot and have a great day!
Olívia

Gemma Evans
(@gemmaevans)

4 years, 10 months ago

My pleasure, you too 🙂

Thread Starter oliviamarchi1
(@oliviamarchi1)

4 years, 10 months ago

🙂

By the way, I love your blog! There are so many cool things in there and it’s so pretty <3

Gemma Evans
(@gemmaevans)

4 years, 10 months ago

Thanks so much, that has made my day!!

Thread Starter oliviamarchi1
(@oliviamarchi1)

4 years, 10 months ago

Anytime! 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Moving down the grey horizontal line on the header’ is closed to new replies.

Tags