JSFiddle - React, Tailwind, and code Playground

by Andreas Søgaard Pedersen

HTML

<nav class="main_menu" data-selectname="Select a page" role="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
    <div class="avia-menu av-main-nav-wrap">
        <ul id="avia-menu" class="menu av-main-nav">
            <li id="menu-item-990" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-7"><a href="#" style="height: 88px; line-height: 88px;"><span class="avia-bullet"></span><span class="avia-menu-text">MyRiskby</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a>

            </li>
        </ul>
    </div>
</nav>
<div id="text-6" class="widget clearfix widget_text" style="position: fixed; top: 89px; display: none;">
     <h3 class="widgettitle">How to sign in to Riskby</h3>	
    <div class="textwidget">
        <p>When you signed up for Riskby, we sent you an email with your Web Address. You can sign in from your Web Address, which looks like this:</p>
        <p><strong>http://my.riskby.com/#/”company name”</strong>

        </p>
        <p><a href="http://riskby.com/support/#support-needhelp">Forgot your Web Address?</a>

        </p>
    </div>
</div>

CSS

div#text-6 {
    width: 330px;
    background-color: #fff;
    padding: 30px 30px;
    position: fixed;
    top: 121px;
    right: 155px;
}
#text-6:after, #text-6:before, #text-6.textwidget:before {
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}
#text-6 h3.widgettitle {
    font-size: 20px;
    font-weight: 800;
    line-height: 27px;
    color: #dd8731;
}
#text-6 a {
    color: #6bb58d;
    display: block;
    text-align: center;
}
#text-6 p:last-child {
    margin-bottom: 0px;
}
li#menu-item-990 {
  border-left: 1px solid #F2F2F2;
  border-right: 1px solid #f2f2f2;
  margin-left: 20px;
  padding: 0 20px;
}

li#menu-item-990 a:after {
  content: '\f107';
  font-family: FontAwesome;
  font-weight: bold;
  font-style: normal;
  margin: 0px 0px 0px 15px;
  text-decoration: none;
  font-size: 15px;
  vertical-align: middle;
  color: #dd8730;
}

JavaScript

;(function ($) {
    $("#text-6").css({
        "display": "none"
    });
    $('#menu-item-990 a').click(function (event) {
        $('#text-6').slideToggle("fast");
    });
    $('#text-6').click(function (e) {
        e.stopPropagation();
    });
    $(window).scroll(function () {

        var a = 1;
        var pos = $(window).scrollTop();
        if (pos > a) {
            $("#text-6").css({
                position: 'fixed',
                top: '45px'
            });
        } else {
            $("#text-6").css({
                position: 'fixed',
                top: '89px'
            });
        }
    });
})(jQuery);