Archived topic

Site Header Border Bottom Width

6 replies · Started by Henk on February 5, 2021

Viewing posts 1–7 of 7

February 5, 2021 at 5:13 am #1646757

Hello,

I have a 1px line under my site header:

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

My Container Width is 1140px, I have set the Header preset to Navigation After (So under my logo is that 1px line), both Header Width & Inner Header Width are set to Contained and the Header Padding Left & Right is 30px.

My problem is that I want the line to start under the logo, but now the line length is the same as the site-header grid-container, but I want the line to have the same lenght as the inside-header grid-container.

I have tried:

.inside-header .grid-container {
    border-bottom: 1px solid #e0e0e0;
}

But that is not working. Any suggestions?

February 5, 2021 at 6:07 am #1646833

Hi there,

try adding this CSS:

.site-header:after {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  border-bottom: 1px solid #e0e0e0;
}

February 5, 2021 at 6:14 am #1646837

Thanks David!

This is what I was looking for.

Great support!

February 5, 2021 at 6:34 am #1646850

Sorry,

One small issue with the above code. When I hover over a link, or click it, the line above that link disappears (the line is "under" the menu).

February 5, 2021 at 7:14 am #1647087

Do you have any top/bottom padding on your Site Header ? As you should just need 1 or 2px of bottom padding to stop that from happening

February 5, 2021 at 10:57 am #1647363

Hi David,

I added bottom padding like this:

.site-header:after {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 2px;
}

But this pushes the the horizontal line downwards.

I have replaced it with:

.main-navigation ul {
padding-top: 1px;

That seems to be working.

February 5, 2021 at 12:43 pm #1647445

Glad to hear you found a solution

This archived topic is closed to new replies.

Start building better websites today.