ty-header-css v1.0.2

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>