Reduce height header in mobile
-
Hi, I would like to reduce the header height in the mobile version. I found out how to reduce it at the bottom by changing the padding value, but I can’t do the same at the top.
The blog I need help with is: (visible only to logged in users)
-
-
No, I’m talking about the header with my logo and the menu. The slideshow is already fine to me
-
Thanks for the clarification. You have this rule in your custom CSS. Adjust the bottom padding as desired.
.site-header { background:#111; border-bottom:0; padding-bottom:1.5em; width:100% }On the bottom of the toggle and logo, there is 1.5em of bottom margin. Add this and adjust as desired.
.site-branding, .menu-toggle { margin-top: 1.5em; } -
-
One more question: how can I make it fixed also in mobile version? Cause I enabled the option but it works only on the desktop version…
-
Give this a try and see what you think.
@media screen and (max-width: 895px) { .site-header { position: fixed; z-index: 9999; } .home .site-content { padding-top: 10% !important; } } -
-
- The topic ‘Reduce height header in mobile’ is closed to new replies.