Moving down the grey horizontal line on the header

  • Resolved oliviamarchi1

    (@oliviamarchi1)


    5 years, 5 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)

  • 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)

    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

    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)

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

    My pleasure, you too ??

    Thread Starter oliviamarchi1

    (@oliviamarchi1)

    ??

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

    Thanks so much, that has made my day!!

    Thread Starter oliviamarchi1

    (@oliviamarchi1)

    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.