ty-header-css

This library will allow you to have the standard TYSS website nav bar styling.
Along with bootstrap classes also include the classes defined in this library as follows 

.ty-nav for nav tag (<nav></nav>)

for logo 
    <a class="navbar-brand ty-navbar-brand" >
        <span class="ty-logo">ty</span><span class="ty-logo-space">module-name
    </a>

1. Import

     <link rel="stylesheet" type="text/css" href="./node_modules/ty-header-css/index.css">
                                     OR
     @import "./node_modules/ty-header-css/index.css" into App.js
   

2)Example of using css classes in html

 <nav class=" ty-nav navbar navbar-expand-md new-bg navbar-light bg-light fixed-top">
    <a class="navbar-brand ty-navbar-brand" >
        <span class="ty-logo">ty</span><span class="ty-logo-space">module-name
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto" >
            <li class="nav-item ty-nav-item ty-nav-item ty-nav-item dropdown mr-2" >
                <a class="nav-link ty-nav-link ty-new-link dropdown-toggle" href="#" id="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu One</a>
                <div class="dropdown-menu  ty-dropdown-menu" aria-labelledby="" style="width: 290px;">
                    <a class="dropdown-item  ty-dropdown-item">sub-menu-one </a>
                    <a class="dropdown-item  ty-dropdown-item" >sub-menu-Two </a>      
                </div>
            </li>
            <li class="nav-item ty-nav-item dropdown mr-2">
                <a class="nav-link ty-nav-link ty-new-link dropdown-toggle" href="#" id="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                   Menu-Two
                </a>
                <div class="dropdown-menu  ty-dropdown-menu" aria-labelledby="" style=" width: 290px;">
                    <a class="dropdown-item  ty-dropdown-item">sub-Menu-One</a>
                    <a class="dropdown-item  ty-dropdown-item" >sub-Menu-Two</a>
                </div>
            </li>
            <li class="nav-item ty-nav-item">
                <a class="nav-link ty-nav-link ty-new-link">Menu-Three</a>
            </li>
           
            <li class="nav-item ty-nav-item dropdown ml-2" >
                <a class="nav-link ty-nav-link ty-new-link dropdown-toggle" href="#" id="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Menu-Four
                </a>
                <div class="dropdown-menu  ty-dropdown-menu" aria-labelledby="" style=" width: 250px;">
                    <a class="dropdown-item  ty-dropdown-item">sub-menu-one</a>
                    <a class="dropdown-item  ty-dropdown-item" >sub-menu-two</a>
                  
                </div>
            </li>
  
        </ul>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item ty-nav-item" >
                <a class="nav-link ty-nav-link " >LOGIN</a>
            </li>
            <li class="nav-item ty-nav-item dropdown profile-icon-dropdown">
                <a class="nav-link ty-nav-link dropdown-toggle icon" id="profileDropdownMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="https://image.flaticon.com/icons/png/512/64/64495.png" width="25" height="25" class="rounded-circle">
                </a>
                <div class="dropdown-menu  ty-dropdown-menu  dropdown-menu-right" aria-labelledby="profileDropdownMenu">
                    <a class="dropdown-item  ty-dropdown-item">Dashboard</a>
                    <a class="dropdown-item  ty-dropdown-item">Edit Profile</a>
                    <a class="dropdown-item  ty-dropdown-item"  style="cursor: pointer;">Logout</a>
                </div>
            </li>
        </ul>
    </div>
</nav>