How can I make another navbar so that it is vertical and pressed tightly in one place to the left?

How can I insert a background image for the entire column or for the beginning of the column in this navbar ? (There will be a picture of chips)

Set the color and thickness for it yourself. enter image description here

 .navbar-collapse { background: linear-gradient(to top, #993333 0%, #FF6633 100%); border-radius: 5px; } .navbar-default .navbar-nav>li>a { color: #f3f3f3; padding: 4px 68px; font-size: 16px; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, .6); font-weight: bold; } .navbar-default { background-color: #fff; border-color: #000000; margin-top: 205px; } .navbar-default .navbar-nav>li>a:hover { color: #ffc000; height: 30px; background: linear-gradient(to top, #FFFFCC 0%, #FFCC33 100%); } .navbar-nav>li { border-right: 1px solid gray; height: 100%; float: left; width: 25%; } .nav { height: 30px; font-size: 16px; } .navbar { min-height: 10px; } .navbar .navbar-nav > li:last-of-type { border-right: none; } .navbar-nav { width: 100%; } .fon { width: 100%; height: 100%; margin-left: 20%; padding-top: -450px; } body { background: url(images/44.jpg) no-repeat center top #edeef0; background-size: 100%; } #logo { width: 130px; height: 77px; } #contacts { margin-left: 60%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="logo"> <a href="index.html"> <img src="images/primerlogo.png" alt="" /> </a> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div id="contacts"> <span style="font-size: 16px;" class="glyphicon glyphicon-envelope"></span>E-mail: <p> <span style="font-size: 16px" class="glyphicon glyphicon-phone"></span>Телефон: +7-962-702-3737 </p> </div> </div> </div> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <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 class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="index.html">Главная</a> </li> <li> <a href="demo.html">Другой </a> </li> <li> <a href="catalog.html">Раздел 3</a> </li> <li> <a href="contact.html">Контакты</a> </li> </ul> </div> </div> </div> <div class="container-fluid"> <nav class="navmenu navmenu-default" role="navigation"> <ul class="nav navmenu-nav"> <li class="active"><a href="#">Пункт 1</a> </li> <li><a href="#">Пункт 2</a> </li> </ul> </nav> </div>

    1 answer 1

    maybe so ?

     html, body { height: 4000px; } .container { width: 95% !important; margin: auto; } .blog-sidebar { position: fixed !important; top: 50px; left: 0; width: 22%; font-size: 12px!important; background: url(http://cherrypapa.com/userfiles/lapsha.jpg); background-size: 100% 100%; } .blog-sidebar li:hover a { color: #111; } 
     <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"> <div class="container"> <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-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" 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> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="">Default <span class="sr-only">(current)</span></a> </li> <li><a href="">Punkt1</a> </li> <li><a href="">Punkt2</a> </li> </ul> </div> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a> </li> <li><a href="#">February 2014</a> </li> <li><a href="#">January 2014</a> </li> <li><a href="#">December 2013</a> </li> <li><a href="#">November 2013</a> </li> <li><a href="#">October 2013</a> </li> <li><a href="#">September 2013</a> </li> <li><a href="#">August 2013</a> </li> <li><a href="#">July 2013</a> </li> <li><a href="#">June 2013</a> </li> <li><a href="#">May 2013</a> </li> <li><a href="#">April 2013</a> </li> </ol> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a> </li> <li><a href="#">Twitter</a> </li> <li><a href="#">Facebook</a> </li> </ol> </div> </div> </div>

    never when bootstrap worked