JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<header class="header">
  <div class="bottom-header">
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown active">
                <div class="wrap">
                  <a href="#" class="dropdown-toggle">О компании <span
                                                class="fa fa-angle-down"></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><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li>
                      <a href="#">One more separated link</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><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="dropdown">
                <div class="wrap">
                  <a...

SCSS

/*HEADER*/

.header {
  position: relative;
  
  .bottom-header {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: #fafafa;

    .navbar-default {
      background-color: transparent;
      border: none;
      margin-bottom: 0;
      & .container-fluid, .navbar-collapse {
        padding: 0;
      }
      .navbar-nav {
        float: none;
        display: table;
        width: 100%;
        max-width: 100%;
        & > li {
          float: none;
          display: table-cell;
          text-align: center;
          & > .wrap > a, & > a {
            display: block;
            padding: 20px;
            line-height: 20px;
            font-size: 15px;
            text-transform: uppercase;
            font-weight: bold;
            color: #000;
            position: relative;
            white-space: nowrap;
            span {
              font-size: 14px;
              margin-left: 11px;
            }
            &.more-items {
              span {
                display: inline-block;
                font-size: 28px;
                height: 16px;
                line-height: 0;
                margin-left: 0;
                position: relative;
                vertical-align: text-bottom;
              }
            }
          }

          &.active, &:hover, &:focus {
            & > .wrap > a, & > a {
              background-color: #7ba106;
              color: #fff;
            }
          }

          &.open {
            & > .wrap > a, & > a {
              &:focus, &:hover {
                background-color: transparent;
              }
            }
          }
          & + li {
            border-left: 1px solid #e6e6e6;
          }
          &.more-block {
            .dropdown-toggle {
              .fa-angle-down {
                display: none;
              }
            }
          }
          &.search-item {
            & > .wrap > a, & > a {
              span {
                font-size: 16px;
...

JavaScript

function checkBlocks() {
  //Проходим циклом по элементам списка... получаем общую ширину LI
  navW = $('.navbar').width(), //Ширина меню
    totalElementsWidth = 0; // Создаём переменную, где будем хранить общую ширину всех LI
  $('.navbar-nav > li').each(function() {
    var el = $(this);
    elW = Math.floor(el.outerWidth());
    totalElementsWidth += elW;
  });
  if (totalElementsWidth > navW) {
    hideBlocks();
  }

}

function hideBlocks() {
  var moreBlock = $('.navbar-nav > li.more-block'),
    ul = moreBlock.children('.wrap').children('ul');
  elem = moreBlock.prev().detach();
  if (ul.length === 0) {
    moreBlock.children('.wrap').append('<ul class="dropdown-menu"></ul>');
  }
  ul.append(elem);
  moreBlock.removeClass('hidden');
  checkBlocks();
}

function showBlocks(){
var moreBlock = $('.navbar-nav > li.more-block'),
    ul = moreBlock.children('.wrap').children('ul');
    if(ul.length > 0) {
    }
}

$(window).resize(function() {
  var $winW = $(this).width();
  if ($winW > 767) {
    checkBlocks();
  }
}).resize();