CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user4163224
user4163224

Reputation:

Put logo inside the bootstrap navbar

I'm was trying to put my logo inside the bootstrap navbar, and now I got it.

The problem is that the navbar breaks on mobile devices, the logo is thrown down, does anyone know what the problem is and how to fix?

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                      <div class="container">
                        <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>
                        </div>
                        <a class="navbar-brand"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a>
                        <div id="navbar" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="sobre.html">QUEM SOMOS</a></li>
                                <li><a href="faq.html">FAQ</a></li>
                                <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li>
                                <li><a href="contato.html">CONTATO</a></li>
                                <li class="active-y"><a href="reservar.html">RESERVAR</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                      </div>
                    </nav>

Example -> http://jsfiddle.net/d5cyt1wp/

Thanks.

Upvotes: 1

Views: 445

Answers (2)

dafilipaj
dafilipaj

Reputation: 1074

Brand logo should go inside <div class="container">. Move it up inside div, so this should fix it:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                  <div class="container">
                    <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"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a>
                    </div>

                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="sobre.html">QUEM SOMOS</a></li>
                            <li><a href="faq.html">FAQ</a></li>
                            <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li>
                            <li><a href="contato.html">CONTATO</a></li>
                            <li class="active-y"><a href="reservar.html">RESERVAR</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                  </div>
                </nav>

Also check official documentation here

Upvotes: 1

Steve Sanders
Steve Sanders

Reputation: 8651

Add a pull-right class to .navbar-header. Right now, that div is taking up the full screen width, pushing the logo down below it. Updated fiddle: http://jsfiddle.net/m7acx1v8/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                      <div class="container">
                        <div class="navbar-header pull-right">
                          <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>
                        </div>
                        <a class="navbar-brand"> <img class="logo-bar" src="http://pubcrawlsp.site44.com/assets/img/logo/logo3.png"></a>
                        <div id="navbar" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="sobre.html">QUEM SOMOS</a></li>
                                <li><a href="faq.html">FAQ</a></li>
                                <li><a href="https://www.facebook.com/pubcrawlsp/photos_stream?ref=ts" target="_blank">FOTOS</a></li>
                                <li><a href="contato.html">CONTATO</a></li>
                                <li class="active-y"><a href="reservar.html">RESERVAR</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                      </div>
                    </nav>

Upvotes: 0

Related Questions