Storefront header

Hi @hestes,

I think the best thing to do here would be to add a background to the navigation like this:

.storefront-primary-navigation {
    background: #fff;
}

Hi,

I have a similar issue. After searching the internet for hours and trying different solutions without having the desired effect I end up here trying to find help.
@mikey Arce: Your solution illustrates perfect where I got stucked.
If you take a look at my project (https://www.gluecklichezwerge.de) and visit a single product page you’ll see that I removed the sidebar to have a bigger product description.
In the header I added a thin image and would like to stretch it and make it fit the width of the main body. With repeat enabled it will end up looking just like the solution you mentioned before.
Now I am asking myself if it is possible to reduce the width of the background (for header, body and footer) to match with the rest of the shop (primary navigation/single product description)?
The same should happen with a background image for main body and the footer.
It would be great to achieve this through code and avoid installation of a plugin. If you need any more details, just let me know.

Any help would be great and is highly appreciated! ??

Best regards,

-Bj?rn

Hi @gluecklichezwerge,

In the future, please start a new topic for your question – it makes it easier for us to make sure we “get” everyone! ??

I feel like you might be complicating things a bit more than they need to be. Why not just add this?

.site-header {
    background: #fff;
}

Cheers,

Hi Mikey,

thanks for your fast reply, but that’s not what I am looking for. But you are right, I feel like I’m missing some basic knowledge here.
Please take a look at the following image:

View post on imgur.com

The two thin black lines to the left and the right of ‘site-navigation’. Is it possible to limit background to this area?

Thank you,

-Bj?rn

Gotcha!

You could do something like this with your image being used:

.site-header {
    background-size: 58% auto;
}

You might need to change the 58% to suit your needs and also account for other screen sizes.

Ok, will give this a try and report back.
Thank you so far!

OMG! Just as expected…I was thinking way too complex.
Because several ways can lead to success I decided to go with your code snippet and give the header background a color by code. I wanted to have the same for the footer so I just went on.
And then all of a sudden my fault became obvious…because not the entire footer area (width) was colored now. Making a small adjustment to your code solved my issue.
Instead of .site-header I am directing the class .main-navigation now and I end up with the desired result: A header and a footer being lined up with the main body. ??

/* CSS For Colored Header Bar */
.main-navigation {
    background: #82ddcd;
}

/* CSS FOR COLORED CREDIT FOOTER */
.site-info {
	background: #82ddcd;
}

//replace color code with any color hex code you want

This way I hope to avoid having issues in responsive mode.
Thank you for your fast replies and support, Mikey! You’ve been a big help pointing me to the right direction!

Thank you for your fast replies and support, Mikey! You’ve been a big help pointing me to the right direction!

Happy to help! ??

Hello again,

seems like I need another small push. I’m just not able to figure out how to align my menu navigation with its background color?
The text should be positioned as shown in this picture (small black line):

View post on imgur.com

Any idea?
https://www.gluecklichezwerge.de

• This reply was modified 6 years, 8 months ago by gluecklichezwerge.

Change your CSS to use .primary-navigation instead:

.primary-navigation {
    background: #82ddcd;
}

Hi Mikey,

sorry to bother. ??
I did, but when I am resizing its height, the result is the same.
My code in detail:

.primary-navigation {
    background: #82ddcd;
    height: 50px;
}

Try setting a height with the padding instead:

.main-navigation .primary-navigation li a {
    padding: 20px 20px !important;
}

YEAH! \o/
That made it. Was just about to read into vertical alignment. Thank you once again, Mikey! You really are an Automattic Happiness Engineer! =) Have a great day!

Hi there, I am pasting the code snippet and other css changes in the style.css sheet in my child theme, but with no effect?

What an I doing wrong?

Regards
Carsten

Strange, the changes are kicking through on tablet, but not in browser, it must be the Cache then.