Change size of header image on mobile version brooklyn theme

[Emelie]

Hey hey! 
I am really annoyed over one thing on my webbshop.... I want the header image to cover more than it does now on the mobile version since it does not look good when the navigation bar covers half of the header picture... The desktop version is good but it looks like the image is cut shorter on the mobile version. How do I change the image size margins/size on mobile version to make the image go further down (see screenshot). I have gotten really good help in here before so I cross my fingers that someone knows how to solve this as well! 🙂 

URL: racketbollen.se
Password: dobewrr

 

[KetanKumar]

@Emelie 

yes please try this way

https://www.mojoin.com/show-shopify-banner-image/ 

[Kinjaldavra]

hello @Emelie 

for this you have to  Show Different Shopify Banner Image on Desktop and Mobile

[Emelie]

Thank you for your reply! Does this work for Brooklyn theme as well? In the guide it says Debute theme. 

[KetanKumar]

@Emelie 

yes its work all doesn't matter any theme  

[Emelie]

Hey again @KetanKumar!

I have now been able to try your tutorial on how to get different images as desktop and mobile header. I like your easy-to-follow way of explaining so many thanks!!
Though I have 3 issues that I don´t seem to solve on my own... See screenshots on how it looks like now. 

1) There is white space above the announcement bar. How do I get rid of this? 
2) There is space above the navigation bar and announcement bar when scrolling. So there is a gap that I would love to get rid of. (I assume this also has to do with my first question above).
3) On desktop the image need to cover full width like it did before. On mobile it looks good.  

I have tried to paste follwing code in my theme.scss.liquid but nothing happens. 
.yx-desktop-hidden{
width: 100%;
padding: 0 !important;
}
.yx-mobile-hidden{
padding: 0 !important;
max-width: 100vw !important;
}

Do you know how I can fix this? 😄 
(URL: racketbollen.se, password: dobewrr)

[KetanKumar]

@Emelie 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.img-responsive {
    width: 100%;
}
@media screen and (max-width: 768px) {
.yx-desktop-banner-section {
    display: none;
}
}

can you please try this code

[Emelie]

Thank you so much @KetanKumar , now the header image is correct size! The issue with the navigation and announcement bar is still there though. Do you know how I can remove the padding above those? (see screenshots in my previous reply)

[KetanKumar]

@Emelie 

yes please add this code

.header-wrapper {top: 0;}

[Emelie]

@KetanKumar 

Unfortunately it does not make any difference 😕 (See screenshot of all the code I have added to make the mobile and desktop header different)

It still looks like the navigation bar is too far down:  

 When scrolling: 

 

[Zworthkey]

hii, @Emelie 
Paste this code on top of the theme.css file.

@media only screen and (min-width: 992px) {
.header-wrapper {
    margin-top: -120px !important;
    height: 120px !important;
}
}

Thank You.

[Emelie]

@Zworthkey 

Thanks for your reply 🙂  it helped a little bit, though the header should be even a little bit higher up. The navigation bar should be over the header picture. Now the navigation bar looks grey due to the white padding on the very top. 
Now it looks like this:

I pasted your code on the very bottom now. Where do I paste the code on the top? On the very top or after all the "definitions" etc? (pls excuse my non-existing code-language :))

[KetanKumar]

@Emelie 

what's issue now?

[Emelie]

@KetanKumar 
Right now it is still a little white padding on top of the image which makes the navigation bar looks grey when tuning in on the website. It looks like this: 

I want the navigation bar to look like this: (on this printscreen I have scrolled down a little bit so that the navigation bar is on top of the header image, whihch is how I want it to look when tuning in on the website) 

 

 

[KetanKumar]

@Emelie 

thanks for it

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[Emelie]

@KetanKumar Thank you so much for checking!

I am using Chrome. How does it look on your computer? 

[Emelie]

@KetanKumar Also I saw now that the navigation bar has disappeared on all pages except the main page. Do you know what has happened? I took a screenshot on how it looks like on the other pages. Would be very very greatful if these issues were fixable : D 

Conclusion: Two issues...
1) The navigation bar on main page is too far up (the padding on top of header image must disappear)
2) The navigation bar is totally gone on all pages except the main page. 

I cross my fingers that this is possible to fix!

[KetanKumar]

@Emelie 

can you please confirm this look other pages?

[Emelie]

@KetanKumar 
That is strange, on my computer (both on laptop screen and big external screen) it looks like my printscreens in previuos repy. I cannot see the navigation bar on any other page except home page. 

[KetanKumar · Accepted solution]

@Emelie 

can you please try this code

@media only screen and (min-width: 992px) {
.template-index .header-wrapper {
    margin-top: -110px !important;
    height: 110px !important;
}
.header-wrapper {
    margin-top: 0px !important;
    height: auto !important;
}
}

[Emelie]

Thank you so so much! now the navigation bar is visible on all pages. 

[KetanKumar]

@Emelie 

its my pleasure to help us