How to put right on the sidebar or navbar depending on the size of the screen?

Question

How to put right on the sidebar or navbar depending on the size of the screen?

Navigation

#1 by (4 votes)

2

I would like to put a Logo on the sidebar instead of navbar for larger screens, and when reducing the screen aspect ratio ( mobile devices, and tablets and smarts), the logo should go to navbar using Media Queries of Bootstrap 3.

html css bootstrap-3 media-queries

asked by anonymous 03.01.2015 / 18:46

1 answer

Diff without comparing spaces or line breaks SQLite Search Error

score 4 · Accepted Answer

Bootstrap brings a number of responsive utilities to help deal with such scenarios.

These utilities are CSS classes that aim to manipulate the presentation of the elements based on the screen of the device where the website is being viewed:

Responsive utilities

┌───────────────┬─────────────────────────────────────────────────────────────────────┐
│               │                       Dispositivos (pixeis)                         │
│               ├───────────────┬────────────────┬─────────────────┬──────────────────┤
│  CSS Class    │ Extra small   │ Small          │ Medium          │ Large            │
│               │ Phones (<768) │ Tablets (≥768) │ Desktops (≥992) │ Desktops (≥1200) │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-xs-* │ Visivel       | Escondido      | Escondido       | Escondido        |
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-sm-* │ Escondido     │ Visivel        │ Escondido       │ Escondido        │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-md-* │ Escondido     │ Escondido      │ Visivel         │ Escondido        │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .visible-lg-* │ Escondido     │ Escondido      │ Escondido       │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-xs    │ Escondido     │ Visivel        │ Visivel         │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-sm    │ Visivel       │ Escondido      │ Visivel         │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-md    │ Visivel       │ Visivel        │ Escondido       │ Visivel          │
├───────────────┼───────────────┼────────────────┼─────────────────┼──────────────────┤
│ .hidden-lg    │ Visivel       │ Visivel        │ Visivel         │ Escondido        │
└───────────────┴───────────────┴────────────────┴─────────────────┴──────────────────┘

Solution

In your case, the solution is to have Brand in the two places you want, by applying the CSS classes shown above to it or appearing in NavBar or appear on SideBar as desired:

See example in JSFiddle where you can drag the width of the preview window to display the < in> Brand to appear or hide through the width of the screen:

NavBar

Hide screens Desktops (≥1200) pixels wide:

<a class="navbar-brand hidden-lg" href="#">Project name</a>

SideBar

Hide on Phones screens (

05.01.2015 / 14:55