JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Wird der Fenster verkleinert, erscheint rechts oben ein Button ...für die NAVIGATION-->


<body id="nav-open">
<nav class="site-nav">
  <div class="container">
    <a href="#nav-open" class="nav-show">Menü öffnen</a>
    <a href="#nav-closed" class="nav-hide">Menü schliessen</a>
    <ul>
      <li class="nav-slider"><a href="">Startseite</a></li>
      <li class="nav-slider"><a href="">Über Uns</a></li>
      <li class="nav-slider"><a href="">Dienstleistungen</a></li>
       <ul>
       <li><a href="#">Kat1</a></li>
       <li><a href="#">Kat2</a></li>
       </ul>
            	
      <li class="nav-slider"><a href="">Kontakt</a></li>
    </ul>
  </div>
</nav>
<header class="site-header">
  <div class="container">
    <div class="small-2 large-12 columns">
    
    <h1 class="title"><strong>Demo(Logo)</strong><br></h1>
        <h6>Fenster kleiner machen-rechts oben erscheint ein Button</h6>
    </div>
  </div>
</header>

 
  </div>

CSS

@charset "UTF-8";
/* CSS Document */

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: .9em;
}

img {
	max-width:100%;
	height:auto;
}

.button {
	text-decoration: none;
	padding: .6em 1.1em;
	font-size: 1.1em;
	font-weight: bold;
	display: inline-block;
}

.button:hover, 
.button:active {
	opacity:.75;
}

.button-cta-top {
	background: #a7d754;
	color: white;
	margin-top: 1em;
	margin-bottom: 1em;
}

.button-cta-bottom {
	background: white;
	color: #333;
}

.site-nav,
.site-header,
.site-inhalt,
.site-video,
.site-rezensionen,
.site-calltoaction,
.site-footer {
	width:100%;
	float:left;
}

.site-nav {background:#073b56;}

.site-nav ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.site-nav a {
	padding: 1em;
	display: block;
	background: #073b56;
	margin-bottom: 1px;
	color: white;
	text-decoration: none;
}

.site-nav a:active, 
.site-nav a:hover {
	outline: 0;
	background: #0c6792;
}

@media screen and (max-width:535px) {

/* nav slider */

a.nav-show,
a.nav-hide {
	float: right;
	width:50px;
	text-indent:-999em;
}

a.nav-show {
	background-image:...