Removing white space on mobile header

Support
#1

Previously this code has fixed the issue, but for some reason it’s not working now.

@media screen and (max-width: 980px) {
.sfm-mob-nav {
margin-top: 0;
}
}

#2

Hello Minna,

Thanks for writing to us.

To remove the white space of the mobile menu, you can use this custom CSS code under Pro–>Theme Option —>CSS

@media (max-width: 980px){
.sfm-style-full #sfm-sidebar .sfm-logo {
padding: 0;
}
.sfm-style-full #sfm-sidebar .sfm-nav {
margin: 0;
}

}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

1 Like
#3

Thank you. I tried that, still doesn’t work, very strange!

#4

Hello Minna,

Please replace the above code with the given CSS code

@media (max-width: 980px){
.sfm-style-full #sfm-sidebar .sfm-logo {
padding: 0 !important;
}
.sfm-style-full #sfm-sidebar .sfm-nav {
margin: 0 !important;
}
  .sfm-full-single .sfm-nav {
    justify-content: start !important;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

#5

With the latest CSS it now looks like this, still not removing the white space in header, but only in the open menu view on mobile:

240784282_891466581806732_3886023344815235575_n
240784282_891466581806732_3886023344815235575_n405×878 12.1 KB
240820683_242909127711819_2224604304290137459_n
240820683_242909127711819_2224604304290137459_n405×878 41.4 KB

#6

Hello Minna,

Sorry about the confusion I checked your site it seems that the custom CSS code getting override I have added this code to your custom CSS box

@media (max-width: 980px){
html.sfm-mob-nav {
    margin-top: 0 !important;
} 
}

Please check your site on a mobile device. You must clear the browser cache before checking it.

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

#7

thank you very much, works now :slight_smile:

#8

You are most welcome Minna

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.