-1

Как я могу сделать еще один navbar, чтобы он был вертикальным и прижат четко на одном месте слева?

Как мне в этот navbar вставить фоновое изображение для всего столбика или для начала столбика? (Там будет картинка стружки)

Цвет и толщину для него задам сам. введите сюда описание изображения

.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 ответ 1

0

может быть так ?

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>

ни когда с bootstrap не работал

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.