Apply CSS to mobile only

IsaacSelwyn

Hi, I want to apply this command: #Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 50px !important; } to custom CSS but only for mobile, I would like the menu wrapper for desktops to remain the same and for this to only apply for mobile phones, how would I do this? Thank you

Pablo

Hi,

You have to insert this CSS into media queries

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

We usually use this property.

@media (max-width:767px){
#idofclass{
CSS code
}
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

IsaacSelwyn

Thank you, I have inserted this: @media (max-width:767px){

#idofclass{

#Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 80px !important; }

}

}

But it still does not change it. maybe because above I have this code: #Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 12px !important; } for desktop. How do I resolve this?

Thank you

Bryan

Pablo have sent you an example of what the css should look like. #idofclass is just an example.

Please sent us a link to your website and explain what exactly you would like to do.

Make screenshots if possible.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

IsaacSelwyn

Hi, sorry I misunderstood! First, I would like the dark blue header colour to cover the logo and menu, because as shown on this screenshot this only covers the top bit of the screen. This is because I used CSS to make the header space smaller for desktop but I need it to stay the original size for mobile. I would also like the logo to be in line with the menu icon because it is underneath it currently. This is the screenshot for that: https://imgur.com/TrvVxe8 Also, as shown on the other screenshot (https://imgur.com/RFP8hen) I would like to remove the cart icon and move the menu down (the home button etc), which I assume will happen when the header becomes the right size. Thank you very much

Bryan

You would have to remove your custom css for the header and go to theme options>global>logo. There change the height and the vertical padding of the logo. It will lower the height of the header.

Then go to theme options>responsive>header and switch on the minimalist header option for the mobile.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

IsaacSelwyn

Thank you it is fixed now