How to put logo on sidebar or navbar depending on screen size?

Question

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

Answer 1

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

These utilities are CSS classes that aim to manipulate the presentation of 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 the Brand in both desired locations, applying the CSS classes shown above to either appear in the Navbar or show up at Sidebar depending on the desired:

See example in Jsfiddle where you can drag the width of the preview window to view the Brand to be shown or hidden by the width of the screen:

Navbar

Hide on Desktops Desktops ( 1200) pixels width:

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

Sidebar

Hide on Screens Phones (<768), Tablets ( 768) and Desktops ( 992) pixels width:

<a class="hidden-sm hidden-xs hidden-md" href="#">Project name</a>

HTML for demonstration

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-lg" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod hendrerit mauris, eget dictum turpis pulvinar semper. Etiam finibus tortor nec mi sodales malesuada. Vestibulum sed dolor id lorem viverra dignissim. Nullam hendrerit nunc vel quam dignissim interdum ut vel nulla. Maecenas nec venenatis nibh, et vehicula odio. Nullam gravida nulla a suscipit aliquam. Vivamus porta est dolor, id tristique massa ultrices ac. Morbi aliquam risus in risus sollicitudin dapibus. Vivamus malesuada interdum neque, aliquet elementum quam porta non. Aenean ac mauris tempus, vestibulum neque id, imperdiet erat. Aliquam et nunc nec nibh convallis tempus vitae at ex. Aenean quis odio nec augue dapibus vulputate non vel lacus. 
        </div>
        <div class="col-sm-4">
            <a class="hidden-sm hidden-xs hidden-md" href="#">Project name</a>
        </div>
    </div>
</div>