- This topic has 4 replies, 3 voices, and was last updated 5 years, 1 month ago by Tom.
September 8, 2015 at 6:38 pm #135419Mosche
I’m trying to get the same bar as mentioned in
However I don’t want it to be a full width.
It should be just as wide as the rest of the site.
If I place the div before the header. And adjust the with in the CSS it looks perfect.
But it’s no longer responsive.
If I put it in the before header content. It’s responsive.
The whole bar is slightly to the left and right.
Not flush with the top and left margin of the header.
How do i get it flush with the left and top margin of the header?
this is the css i used:
}September 8, 2015 at 10:26 pm #135440bdbrown
Hi Mosche. If you add the code to the “Before Header Content” hook, the bar should line up with the header width. Try removing the “width” property from your style. If that doesn’t do it, can you post a link to your site so we can see what it’s doing? Thanks.September 9, 2015 at 12:58 am #135468TomLead DeveloperLead Developer
The above should work.
Alternatively, you can add the
grid-containerclass to your element like this:
<div class="full-width-bar grid-container grid-parent">September 9, 2015 at 4:43 am #135518Mosche
I’m currently running the website on a local test environment.
So unfortunately I can’t show the live version yet.
I’ve removed the
Then I realized that the spacing for the header was creating the gap, this time on both sides.
I reduced the header spacing to 0
And my bar sits neatly flush to the top and sides of my header.
And is responsive.
The only issue is that my Logo and header widget are also sitting flush with the sides of the header.
Which doesn’t look so well. But I can find a way to get around it.
As always. Many thanks for the support and quick response.September 9, 2015 at 9:12 am #135573TomLead DeveloperLead Developer
So you had to remove the header spacing for this to work? Any chance you can post a screenshot of what it looked like with the header spacing?
- You must be logged in to reply to this topic.