[Resolved] Site Header Border Bottom Width

[Henk]

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?

[David]

Hi there,

try adding this CSS:

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

[Henk]

Thanks David!

This is what I was looking for.

Great support!

[Henk]

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

[David]

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

[Henk]

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.

[David]

Glad to hear you found a solution

[Author]

Posts