Fixed header width with full width bottom header bar

  • Resolved Leo

    (@blahraptors)


    9 years, 1 month ago

    Hi there,

    My website is ptology.ca I’m trying to keep the header at a max width of 1170px so that the logo and navbar are not too far apart on a widescreen.

    So far I have changed the CSS to do just that. Only problem is now the bottom header border (ie. header bottom border) is also 1170px wide but I want it to have 100% of screen width. So how do I do this?

    My best effort has been to remove the header bottom border and instead use the content’s (just below the header) top border. But this content only appears on the first page so the other pages currently have no bottom header bar. I’ve also tried keeping the header width at 100% and positioning the logo and navbar instead, with no success.

    Help please, thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • This will change the bottom-border:

    header.tc-header {
	border-bottom: solid 10px #55a4da;
}
#my-content-header {
	display: none;
}

    Thread Starter Leo

    (@blahraptors)

    Thanks for the reply but the code doesn’t do what I’d like to.

    My overall aim is to have the header bottom bar span across the screen width on ALL pages while restricting the header width to 1170px. Sorry if my original post wasn’t clear.

    As I’ve said previously, I can make the bar appear on the front page by utilizing #my-content-header top border, but this div isn’t on other pages, hence no header bar.

    Not sure where the #my-content-header div came from?

    My suggestion would be to use this snippet to create Widget Area after the Header, then use the same code & CSS using a Text Widget.

    Thread Starter Leo

    (@blahraptors)

    Thanks, that worked! Maybe not the purest solution (I think ideally you’d have a wrapper for the logo and navbar), but gets the job done.

    The #my-content-header div came from this snippet because I wanted a block of text above the slider

    I don’t do pure ??

    Please mark as [resolved] in rhs sidebar.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Fixed header width with full width bottom header bar’ is closed to new replies.