JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<a href="#" class="responsive-nav"></a>

CSS

.back-to-homes {
font-size: 27px!important;
color: #000;
position: fixed;
top: 58px;
right: 62px;
cursor: pointer;
z-index: 99999;
display: none;
}

.back-to-homes:hover {
font-weight: bold!important;
transition: all 200ms linear;
background-color: transparent!important;
}


.go-to-menu {
font-size: 27px!important;
color: #000;
position: fixed;
top: 58px;
right: 62px;
cursor: pointer;
z-index: 99999;
display: block;
}

JavaScript

jQuery(document).ready(function(){

//Change background
$(".responsive-nav").append("<span class='go-to-menu'>☰</span><span class='back-to-homes'>×</span>");
$(".site-logo h2").append("<img src='' style='display:none'>");

$('.responsive-nav').click(function(){
  $('.go-to-menu, .back-to-homes, #site-logo, .site-logo img').toggle();
  $('#site-header').toggleClass('transparent-bg');
  $('#site-header').toggleClass('no-hover');
});
});