[Resolved] Header with border also on tablet and mobile view

[Jos]

Hi,

I am building a site where I want a border under the header. I found some CSS to fix this. But it only shows on desktop.

body:not(.home) .site-header {
border-bottom: 2px solid #930A1A;
}

How can i use CSS to get a border on tablet and mobile too?
And can i use different thickness and color for the border?

Thanks in advance.
Jos

[Leo]

Hi there,

I’m unable to get your site to load. Can you double check?

That CSS will add a border on every page except the home page.

If you want it on every page, try this CSS:

.site-header {
    border-bottom: 1px solid #000000;
}

This should add it to tablet and mobile as well. You can increase the px number to make it thicker, and change #000000 to the color you want.

Let me know if this helps 🙂

[Jos]

Hi Leo,

Thanks for your quick reaction.
The link is https://heidi.beheer95.nl/
I used it, but it still does show only on desktop.
Other ideas?

Greets,
Jos

[David]

Hi there,

we need to include the mobile header in your CSS:

body:not(.home) .site-header, body:not(.home) #mobile-header {
    border-bottom: 2px solid #930A1A;
}

[Jos]

Hi David,

This worked.
THANKS!

Greets,
Jos

[David]

Glad we could help

[Author]

Posts