How to resize the header for mobile devices without changing it for desktop?

[Zetland]

I’m currently trying to resize the mobile version of my header so that the logo and the menu button line up. However, I don’t want to resize it on the desktop version of my site – it’s already perfect for that. How can I shrink it for mobile devices, while keeping it the same for desktop computers?

[Veena]

Can you pls share a link to your site?

[Zetland]

Sure, it can be found here: vocularapp.com

[Zetland]

I’d also like to know how to remove the social media buttons for mobile phones, if you can show me that? Thanks!

[Veena]

Pls use the below custom CSS in themeoptions –

@media only screen and (max-width: 479px){
#header .social-container {
    display: none;
}
#site-logo {
    top: 20px;
}
#mobile-menu-toggle {
    top: 20px;
}}

[Author]

Posts