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