section bootstrap 4 header navbar left logo, center menu,right icons

In this example below you will see how to do a section bootstrap 4 header navbar left logo, center menu,right icons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by AxeLVaisper, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AxeLVaisper ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>section bootstrap 4 header navbar left logo, center menu,right icons</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      header {
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
header .navbar-nav a.nav-link {
  color: #777;
}
header .navbar-nav a.nav-link:hover {
  color: #528bff;
}
header .navbar-nav .active a.nav-link {
  color: #444444;
}
header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <!-- demo -->
<div class="container">

  — Каждый телефонный разговор я начинаю со слов «Мой телефон почти сел и может отключиться, так что давай по–быстрому». — Если у вас хороший метаболизм, голова полна волос и хорошая работа — не женитесь молодым, подождите 10 лет и делайте выбор. — Статистически,
  тебе нет смысла волноваться, как выглядит мама твоей первой жены. — Я бы с тобой согласился, но тогда мы оба будем неправы. — У соседа трава зеленее, потому что удобрена дерьмом. — Музыка была лучше во времена, когда разрешали петь некрасивым людям.
  — Если меня уволят – это будет хорошей проверкой моей жены на верность, если же меня повысят – то проверкой меня. — Когда жизнь сует тебе под нос лимон, закажи себе хвост лобстера к нему. — Аккумулятор моего Айфона — это то, что заставляет меня спешить
  домой. — Если жена предлагает мне минет, значит, пора делать выписку с карты.</div>

<!--  navbar -->
<header>
  <div class="container">
    <nav class="navbar navbar-expand-md no-gutters">
      <div class="col-2 text-left">
        <a href="https://www.froala.com">
            <img src="https://placehold.it/102x30" alt="image" height="30">
          </a>
      </div>

      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

      <div class="navbar-collapse justify-content-center col-md-8 collapse" id="navbarNav4" style="">
        <ul class="navbar-nav justify-content-center">
          <li class="nav-item active">
            <a class="nav-link" href="https://www.froala.com">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.froala.com">Team</a>
          </li>
        </ul>
      </div>

      <ul class="navbar-nav col-2 justify-content-end d-none d-md-flex">
        <li class="nav-item">
          <a class="nav-link" href="https://www.froala.com"><i class="fa fa-facebook"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.froala.com"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.froala.com"><i class="fa fa-github"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.froala.com"><i class="fa fa-google"></i></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<!-- demo -->
<div class="container">

  — Каждый телефонный разговор я начинаю со слов «Мой телефон почти сел и может отключиться, так что давай по–быстрому». — Если у вас хороший метаболизм, голова полна волос и хорошая работа — не женитесь молодым, подождите 10 лет и делайте выбор. — Статистически,
  тебе нет смысла волноваться, как выглядит мама твоей первой жены. — Я бы с тобой согласился, но тогда мы оба будем неправы. — У соседа трава зеленее, потому что удобрена дерьмом. — Музыка была лучше во времена, когда разрешали петь некрасивым людям.
  — Если меня уволят – это будет хорошей проверкой моей жены на верность, если же меня повысят – то проверкой меня. — Когда жизнь сует тебе под нос лимон, закажи себе хвост лобстера к нему. — Аккумулятор моего Айфона — это то, что заставляет меня спешить
  домой. — Если жена предлагает мне минет, значит, пора делать выписку с карты. — Новый признак крутизны – встретиться с друзьями и ни разу не заглядывать в телефон. — Научи человека ловить рыбу, и он снова проголосует за того, кто ему пообещает дать
  эту рыбу. — Тот факт, что есть уродливые проститутки, исчерпывающе показывает суть мужчин и свободного рынка. — Американские жиробасы 20 лет готовились к этой зиме. — У большинства знаменитостей нет даже университетского образования – так какого черта
  вообще с ними советоваться по какому-либо серьезному вопросу? — Я открою тренажерный зал, который превратится в бар после октября. — Хотел бы я любить хоть что–то так же, как я всё ненавижу. — Сложно поверить, что Итальянцы когда-то были Римлянами.
  — Только неандерталец опускается до физического насилия. Я же предпочитаю унижать морально, ломать дух и лишать надежды. — Моя первая жена была ярой противницей абортов, пока моя подружка не забеременела. — Дестини, Фэйт и Карма (destiny, faith, carma
  – судьба, вера, карма) – так зовут стриптизерш в Атланте. — Одна из моих любимых вещей – когда кто–то размещает свою селфи, и никто ее не лайкает. — Слушание собеседника на половину состоит из ожидания своей очереди сказать, а на половину из напоминаний
  себе менять выражение лица каждые 10 секунд. — Мне кажется, алкоголь создает больше людей, чем уничтожает. — Когда я слышу «Есть минутка?» – я понимаю, что сейчас я потеряю полчаса, которые никогда не смогу вернуть. — Будь собой – отличный совет примерно
  для 5% людей. — Тату это не моё – я же не вешаю наклейки на бампер своего Ламборгини. — Скоро ты поймешь, что тишина – лучший способ послать на хер. — Когда ты травишь свои истории – я думаю только, насколько же короче они могли быть. — Лучшая месть
  – это положить болт. — Начинаем, наконец, смотреть первый сезон "Во все тяжкие"… или идем учиться на пилота самолёта. — Когда мне говорят «Надо нам как–нибудь встретиться», я отвечаю «Конечно, я позвоню тебе». Это ложь в ответ на ложь. — Бедняки едят
  столько фас–фуда, что кажется, их время стоит безумных денег. — Я просто хочу быть достаточно богатым, чтобы не быть зацикленным на деньгах. — Нет человека, чей кредитный рейтинг ниже, чем у того парня, который размахивает 100$ купюрой на фото. — 98%
  людей, комментирующих в сети смерть Манделы, не смогут ответить на простейшие вопросы о его жизни. — Она подруга спросила меня, что я буду делать, если у меня будет 10 миллионов баксов. Я ей ответил: «Спрошу, где все мои остальные бабки». — Мне не нужен
  чехол для Айфона – я что, безответственный или нищий? — Не стоит выходить на пенсию до тех пор, пока твои накопления не приносят тебе больше, чем ты получал в свой лучший год. — Айфон 5С – самый милый способ сказать «я беден». — Прежде чем люди могут
  высказывать свое мнение по Сирии, они должны сперва показать её на карте. — Как жаль, что тупость не причиняет боль её носителю. — Цветы и извинения в разы проще, чем что–то менять в себе. — Карабкаясь на вершину пищевой цепи, мы ведь не были вегетарианцами.
  — Большинство людей даже в фильме про свою жизнь играли бы роль второго плана. — Тебя нет в социальных сетях? Как же тебя найдут твои одноклассники? – Пусть наберут моё имя в Гугле. — Феминистки – это уродливые неудачницы, которые ищут оправдание своим
  поражениям. — Пожалуйста, давайте прекратим именовать их «хипстерами» и снова станем звать «сосунками», как в старые добрые времена. — Если бы составление мнения о человеке по первому впечатлению было Олимпийским видом спорта, меня бы заподозрили в
  приеме допинга. — Слишком много людей всё ещё отвечают на звонки так, будто не знают, кто звонит. — Какой машиной можно впечатлить девушку? – Банкоматом. — Если ты кого–то любишь очень сильно – сломай его дух, чтобы у него никогда не было воли уйти
  от тебя. — Если ты можешь быть хорош в одной вещи – будь хорош во лжи. Тогда ты будешь хорош во всём. — «Он неплохой парень, если узнать его поближе» – это отличное определение мудака. — То, как легко человек обижается, прямо пропорционально тому, как
  он туп. — В мире 2 универсальных языка – английский и громкий медленный английский. — Детишкам пора усвоить урок – Санта любит богатых детей больше. — Если хочешь умереть богатым – живи согласно 3–м правилам: если это летает, плавает или трахается –
  арендуй, а не владей этим. — Я всегда узнаю банкира в баре за 1 минуту – он сам мне говорит об этом. — Чего ради я должен жениться – это ведь, считай, делать ставку на половину твоего состояния, что ты будешь любить её вечно. — Кто–то ещё верит в правосудие,
  когда все умные люди откосили от обязанности быть присяжными? — Стрижка – хороший экономический индикатор. В плохие времена люди ходят стричься раз в 8 недель, в хорошие – раз в 6. Я хожу каждые 3 недели. — Мои либеральные друзья в восторге от нового
  Айфона, сделанного китайскими детьми с использованием редкоземельных металлов, добытых рабами, от компании, которая не платит налогов. — Самые крутые клички людей – те, о которых они не в курсе.
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/AxeLVaisper/section-bootstrap-4-header-navbar-left-logo-center-menuright-icons-dewbRP */
header {
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
header .navbar-nav a.nav-link {
  color: #777;
}
header .navbar-nav a.nav-link:hover {
  color: #528bff;
}
header .navbar-nav .active a.nav-link {
  color: #444444;
}
header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

Comments