ty-header-css
v1.0.2
Published
Testyantra website Header
Downloads
3
Readme
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>
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>