I wonder how I could remove a navbar from a given resolution? Example: at resolution less than 1024x768 one of the navbars disappears and another navbar turns the toogle button? This is done by less or half queries. Remembering that I'm using Bootstrap.
The site in question is this: link
So I would like blue navbar to disappear from a certain resolution, and white navbar would turn to to .
>Use Media Queries
@media (max-width: 1024px) {
#navbar{display: none;}
.btn-toggle{display: block;}
}
By default let the toggle button with "display: none", when it reaches this size of 1024 it will hide the #navbar and show the button.
Do not forget to add the "meta viewport" in <head> </head> of HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To change the layout according to a resolution, use the CSS Media Screen:
This example below demonstrates that if the browser has a maximum width of 767px it will make the changes justified.
header .contato .mailtopo, header .contato .dados .campo .siga{display:block;}
header .dados-menu ul{display:block;}
header a.menu-mobile {display:none;}
@media screen and (max-width:767px){
header .contato .mailtopo, header .contato .dados .campo .siga{display:none;}
header .dados-menu ul{display:none;}
header a.menu-mobile {display:block;}
}
That is, just create the layout you want for the lower resolution and one for the higher resolution and tell the CSS which display according to the size of the screen. If you can adjust a class it is better, if it does not, create another TAG and leave it hidden until the resolution changes and you display or hide.
To force mobile resolution (remove the zoom function), use the meta tag
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
I hope I have helped.