Remove and add elements depending on resolution

Asked

Viewed 17,919 times

5

I wonder how I could remove a navbar a certain resolution? Example: in resolution less than 1024x768 one of navbars disappears and another navbar turns the button of toogle? This is done by Less or media-queries. Remembering that I am using Bootstrap.

The site in question is this: http://goo.gl/aZOjTS

So I’d like to navbar blue disappeared from a certain resolution, and the navbar turn the white toogle.

css twitter-bootstrap

  • You have access to CSS?

  • Yes, I do, but I don’t have access to Sass

2 answers

7

Use Media Queries

@media (max-width: 1024px) {
  #navbar{display: none;}
  .btn-toggle{display: block;}
}

By default leave the toggle button with "display: None", when you arrive at this size of 1024 it will hide the #navbar and show the button.

Don’t forget to add the "meta viewport" to <head> </head> of HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Jsfiddle example

  • So make fade beauty but and to make appear the toogle button?

  • 1

    I edited the answer to better understand.

  • So, I still don’t understand how to hide the navbar, the toggle appears but the navbar doesn’t go away

  • Look at the answer for an example in Jsfiddle.

4

To change the layout according to a resolution use in CSS the Media Screen:

This example below demonstrates that if the browser has a maximum width of 767px it will make justified changes.

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 screen size. If you can adjust a class is better, if not, create another TAG and leave it hidden until the resolution changes and you display or hide.

To force mobile resolution (zoom out), use the meta tag

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

I hope I’ve helped.

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.