How to make an absolute positioning of the logo using bootstrap?

The logo is in the same container as the navigation menu. The container will have a background image, and you need the container to be as high as the menu, not including the height of the logo.

enter image description here

<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="pull-left"><img src="img/Logo.png"></a> <!--Логотип --> <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> <div id="navbar" class="collapse navbar-collapse pull-right"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Services</a></li> <li><a href="#contact">Portfolio</a></li> <li><a href="#contact">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>

    1 answer 1

    And what's stopping you from registering your styles via class or id? Or override the bootstrap? For example:

     .my-logo { position: absolute; } .my-navbar { background-image: url("http://images.freeimages.com/images/previews/01a/technology-background-1632715.jpg"); } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="my-navbar navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="my-logo pull-left"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Logo&w=200&h=100"></a> <!--Логотип --> <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> <div id="navbar" class="collapse navbar-collapse pull-right"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Services</a></li> <li><a href="#contact">Portfolio</a></li> <li><a href="#contact">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>

    • Thank you, this is what I need. I wondered if for this special class bootstrap. - Rumata