JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<header>
<!-- Сюда я его уже додумалась впихнуть тогда получается все то что я хотела-->
<a href="/"><span><img src="images/icons/logo.svg"></span></a></header>
    <!-- Navigation
      --->
    <nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a id="menu-toggle-xs" href="#menu-toggle" class="menu-toggle pull-left hidden-lg hidden-md hidden-sm"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
          <button id="topMenuCollapsBtn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <!-- Здесь был изначально логотип -->
            <li class=""><a href="#row-news" class="page-scroll">Новости</a></li>
            <li><a href="#row-advantages" class="page-scroll">Преимущества</a></li>
            <li><a href="#row-map-implement" class="page-scroll">Карта внедренных проектов</a></li>
            <li><a href="#row-reviews" class="page-scroll">Отзывы</a></li>
            <li><a href="#footer" class="page-scroll">Контакты</a></li>

CSS

.navbar{
    padding-top:50px;
}