Stay Theme Header image

alydonnelly · Member · Apr 7, 2015 at 6:59 pm
Copy link

Add topic to favorites
Hello,

I’m trying to set my header image to fill the entire width of my website. The Stay theme only allows the header/logo image to cover 300px. Is there a way to override it with CSS? I currently have a logo on there, but the default sizing seems to be the same for both logo and header image. Ideally, I’d like the header image to fill the space above the menu to the very edges, and since the menu icon appears next to the header/logo on mobile, have the icon overlay the header image. Any help or advice would be appreciated.

Thanks!

The blog I need help with is: (visible only to logged in users)
pcosta88 · Member · Apr 7, 2015 at 7:16 pm
Copy link
Hi,
I am able to get your site Logo Alianne Donnelly to cover the entire top-part of your site (above your menu) with the following CSS code
adjust max-width as needed. You will need to have the premium upgrade in order to edit CSS.
```
.site-header .site-logo {
    margin-bottom: 5px;
    max-height: 200px;
    max-width: 1600px;
    width: auto
```
I am not sure how it will look on mobile. It should adjust to fit the device.
alydonnelly · Member · Apr 8, 2015 at 4:56 pm
Copy link
Thanks for the tip! I actually found a different workaround:
```
#masthead {
	background-image: url('https://alianneblog.files.wordpress.com/2015/04/abstract-nebula-blue.jpg');
}

#primary-nav-container {
	background: #aecde3;
}
```
That seems to avoid the issues with resizing in mobile. It works for tiled backgrounds. not sure how actual pre-sized graphics would fare, but this is good for me for now. Thank you for the code, though! I might use it in the future.

No items found.