JSFiddle - React, Tailwind, and code Playground

by Florian Bar

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<div>


<header>
        <nav>
            <ul>
                <li><button id="trigger" onclick="functionToExecute()">Home</button></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <button id="signup-button">Sign Up</button>
        </nav>
    </header>
    </div>

CSS

header {
    /* position: fixed;
    top: 0;
    left: 0; */
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-grow: 1; /* Allow the ul to take up remaining space */
}

nav ul li {
    margin-right: 20px;
}

#signup-button {
    position: fixed;
    top: 20px;
    right: -999px; /* Initially off-screen */
    transition: right 0.3s ease;
}

.show-signup #signup-button {
    right: 20px; /* Bring the button into view */
}

JavaScript

var trigger = document.querySelector("#trigger");

function functionToExecute() {

}

trigger.addEventListener('click', function() {

    //if (window.scrollY > 100) { // Adjust the scroll threshold as needed
        header.classList.add('show-signup'); // Show the button
    //} else {
    //    header.classList.remove('show-signup'); // Hide the button
    //}
});