Archived topic

Header with border also on tablet and mobile view

5 replies · Started by Jos on November 13, 2018

Viewing posts 1–6 of 6

November 13, 2018 at 6:02 am #726079

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

November 13, 2018 at 6:34 am #726101

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

November 13, 2018 at 6:51 am #726280

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

November 13, 2018 at 8:18 am #726367

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;
}

November 13, 2018 at 10:20 am #726498

Hi David,

This worked.
THANKS!

Greets,
Jos

November 13, 2018 at 10:33 am #726506

Glad we could help

This archived topic is closed to new replies.