Please, i want to use topnav and headernav on wide screen but don’t want to display them in small screen (smartphone): is there a special class or id I can use in order to use display:none in CSS ?
Generally speaking is there a special class or id to use when i want to modify CSS only for small screen?
Also my header logo always add a padding of 30px in small screen, any way to get reed of it? It doesn’t help when I modify .site-title: it works only for wide screen.
Last question, is there a class or id to add to a background picture (the one in my header) if I want to make it responsive?
If you use the supplied child theme (download link in Theme options Help dropdown top right), you will get a clean style.css with all the mediaqueries so you can specify css for different screens.
Let’s say you wish to hide header menu for mobile, then you would do:
@media only screen and (max-width: 719px) {
#nav-header { display: none; }
}