Mobile Header Hight Issue on Turbo version 4.1.1

Technical Q&A
,
1

Changed my code to this in order to create a larger mobile header:

header {
display: none;
.top_bar {
text-align: center;
height: 100px;
@include flexbox();
@include align-items(center);
.icon-search {
z-index: 3;
&:before {
font-size: 18px;

The hight is changed but now it overlaps the hero image. How to make the black background extend to 100px as well?

aquirkydesigner_0-1712286887788.jpeg
aquirkydesigner_0-1712286887788.jpeg1170Ɨ2532 210 KB

2

Please add this code to your CSS file

@media (max-width: 798px) {
.header-section {
position: relative !important;
}
}
3

Thank you! Does it matter where in the file I put that code snippet? (Sorry Iā€™m not a coder, just a designer, but trying not to bother the coder on my team with something so little lol)

4

Hi @aquirkydesigner

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag ā†’ save.

PageFlyHenry_0-1712287489892.png
PageFlyHenry_0-1712287489892.png1365Ɨ651 47.6 KB

@media (max-width: 767px){ a#pagecontent { padding: 50px !important; } }

Hope that my solution works for you.

Best regards,

Henry | PageFly

5

style.scss.liquid file

6

Nevermind. Just stick it in above the existing code I edited. Worked perfectly. THANK YOU!!!