<!DOCTYPE html>
<html lang="nl" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla JS Responsive Menu</title>
    <link rel="stylesheet" href="css/responsivemenu.css">
    <link rel="stylesheet" href="css/demo.css">
    <script type="text/javascript">function hasClass(e,t){return e.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))}var el=document.documentElement;var cl="no-js";if(hasClass(el,cl)){var reg=new RegExp("(\\s|^)"+cl+"(\\s|$)");el.className=el.className.replace(reg," js")}</script>
</head>
<body>
<div id="wrapper" onclick="">
    
    <div class="navigation_container navigation_container1" role="navigation" aria-label="Main menu">
        <p class="logo"><a href="#">Nature Travelers</a></p>
        <ul class="navigation" role="menubar">
            <li class="active" role="presentation">
                <a role="menuitem" class="test" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Home">Home</a>
            </li>
            <li role="presentation">
                <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 2">Item 2</a>
            </li>
            <li role="presentation">
                <a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 3">Item 3</a>
                <ul role="menu">
                    <li role="presentation">
                        <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
                    </li>
                </ul>
            </li>
            <li role="presentation">
                <a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 4 menu">Item 4</a>
                <ul role="menu">
                    <li role="presentation">
                        <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>
                        <ul role="menu">
                            <li role="presentation">
                                <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test1">Test1</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test2">Test2</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test3">Test3</a>
                            </li>
                        </ul>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <!--<div class="navigation_container navigation_container2" role="navigation" aria-label="Main menu">-->
        <!--<ul class="navigation" role="menubar">-->
            <!--<li class="active" role="presentation">-->
                <!--<a role="menuitem" class="test" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Home">Home</a>-->
            <!--</li>-->
            <!--<li role="presentation">-->
                <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 2">Item 2</a>-->
            <!--</li>-->
            <!--<li role="presentation">-->
                <!--<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 3">Item 3</a>-->
                <!--<ul role="menu">-->
                    <!--<li role="presentation">-->
                        <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
                    <!--</li>-->
                    <!--<li role="presentation">-->
                        <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>-->
                    <!--</li>-->
                    <!--<li role="presentation">-->
                        <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</li>-->
            <!--<li role="presentation">-->
                <!--<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 4 menu">Item 4</a>-->
                <!--<ul role="menu">-->
                    <!--<li role="presentation">-->
                        <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
                    <!--</li>-->
                    <!--<li role="presentation">-->
                        <!--<a role="menuitem" aria-haspopup="true" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="A long one">A long one</a>-->
                        <!--<ul role="menu">-->
                            <!--<li role="presentation">-->
                                <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test1">Test1</a>-->
                            <!--</li>-->
                            <!--<li role="presentation">-->
                                <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test2">Test2</a>-->
                            <!--</li>-->
                            <!--<li role="presentation">-->
                                <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test3">Test3</a>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--<li role="presentation">-->
                        <!--<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Test">Test</a>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</li>-->
        <!--</ul>-->
    <!--</div>-->



<!-- loading apollo dependancy -->
<script src="apollo.js"></script>
<!-- loading responsive menu -->
<script src="vanilla.js.responsive.menu.js"></script>
<!-- initializing the menu -->
<script type="text/javascript">
    responsivemenu.init({
        wrapper: document.querySelector('.navigation_container1'),
        togglecontent: 'menu',
        sticky: 0,
//      animateduration: 1000,
//      subanimateduration: 1000,
        onAfterInit: function() {
            console.log('after init');
        },
        onAfterLoad: function() {
            console.log('after load');
        },
        onBeforeToggleOpen: function() {
            console.log('before toggle open');
        },
        onAfterToggleOpen: function() {
            console.log('after toggle open');
        },
        onBeforeToggleClose: function() {
            console.log('before toggle close');
        },
        onAfterToggleClose: function() {
            console.log('after toggle close');
        },
        onBeforeSubToggleOpen: function() {
            console.log('before sub toggle open');
        },
        onAfterSubToggleOpen: function() {
            console.log('after sub toggle open');
        },
        onBeforeSubToggleClose: function() {
            console.log('before sub toggle close');
        },
        onAfterSubToggleClose: function() {
            console.log('after sub toggle close');
        }
    });

//    responsivemenu.init({
//        wrapper: document.querySelector('.navigation_container2'),
//        onAfterInit: function() {
//            console.log('after init 2');
//        }
//    });
</script>
<div id="banner">
    <h1>Botanic Garden Travelers</h1>
  </div>
</div>
</body>
</html>
body {
  background: #ecf0f1;
  margin: 0;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 24px;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

*, *:before, *:after {
  box-sizing: border-box; }

.site {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px; }

.rm-togglebutton,
.rm-subtoggle {
  margin: 5px;
  padding: 5px 10px;
  border: 1px solid black;
  outline: none;
  background: #fff;
  color: #0072B3;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer; }
  .rm-togglebutton:hover,
  .rm-subtoggle:hover {
    text-decoration: underline; }
  .rm-togglebutton:focus,
  .rm-subtoggle:focus {
    text-decoration: underline; }

.rm-subtoggle {
  margin: 5px;
  float: right; }
.navigation_container {
  background: #745d46;
  color: #fff;
  min-height: 40px;
  font-size: 2rem;
 }
  .navigation_container ul {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none; }
    @media (min-width: 600px) {
      .navigation_container ul {
        height: 40px; } }
  .navigation_container ul:before,
  .navigation_container ul:after {
    display: table;
    content: " "; }
  .navigation_container ul:after {
    clear: both; }
  .navigation_container .rm-closed li.rm-parent > a:after,
  .navigation_container .rm-fullmenu li.rm-parent > a:after {
    content: " \25bc"; }
  .navigation_container .rm-closed li.parent > a:after,
  .navigation_container .rm-fullmenu li.parent > a:after {
    content: " \25b6"; }
  .navigation_container li {
    padding: 0;
    clear: both; }
    @media (min-width: 600px) {
      .navigation_container li {
        height: 40px;
        float: left;
        clear: none; } }
    .navigation_container li.focused, .navigation_container li:hover a,
    .navigation_container li a:hover,
    .navigation_container li a:focus {
      background: #2c3e50; }
  .navigation_container .rm-opened li {
    float: none; }
  .navigation_container a {
    display: block;
    color: #fff;
    padding: 8px 16px;
    line-height: 24px;
    text-decoration: none;
    height: 40px; }
    .navigation_container a:after {
      font-size: 12px;
      vertical-align: middle;
      line-height: 24px;
      text-decoration: none; }
  .navigation_container .active a,
  .navigation_container .active a:hover,
  .navigation_container .active a:focus {
    background: #fff;
    color: #333;
    cursor: default; }
  .navigation_container .rm-closed li,
  .navigation_container .rm-fullmenu li {
    overflow: visible; }
    .navigation_container .rm-closed li ul,
    .navigation_container .rm-fullmenu li ul {
      height: auto;
      background: #2c3e50;
      padding: 0;
      width: 180px;
      border-top: none; }
      @media (min-width: 600px) {
        .navigation_container .rm-closed li ul,
        .navigation_container .rm-fullmenu li ul {
          transition: transform 0.1s cubic-bezier(0.195, 0.4, 0.45, 0.785);
          transform: scaleY(0);
          transform-origin: 0 0; } }
    .navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
    .navigation_container .rm-fullmenu li.rm-focused > ul,
    .navigation_container .rm-fullmenu li:hover > ul {
      display: block; }
      @media (min-width: 600px) {
        .navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
        .navigation_container .rm-fullmenu li.rm-focused > ul,
        .navigation_container .rm-fullmenu li:hover > ul {
          transform: scaleY(1); } }
    @media (min-width: 600px) {
      .navigation_container .rm-closed li.rm-focused li ul, .navigation_container .rm-closed li:hover li ul,
      .navigation_container .rm-fullmenu li.rm-focused li ul,
      .navigation_container .rm-fullmenu li:hover li ul {
        transform: scaleX(0); } }
    @media (min-width: 600px) {
      .navigation_container .rm-closed li.rm-focused li.rm-focused > ul, .navigation_container .rm-closed li.rm-focused li:hover > ul, .navigation_container .rm-closed li:hover li.rm-focused > ul, .navigation_container .rm-closed li:hover li:hover > ul,
      .navigation_container .rm-fullmenu li.rm-focused li.rm-focused > ul,
      .navigation_container .rm-fullmenu li.rm-focused li:hover > ul,
      .navigation_container .rm-fullmenu li:hover li.rm-focused > ul,
      .navigation_container .rm-fullmenu li:hover li:hover > ul {
        transform: scaleX(1); } }
    .navigation_container .rm-closed li li,
    .navigation_container .rm-fullmenu li li {
      float: none; }
      .navigation_container .rm-closed li li.rm-focused > a, .navigation_container .rm-closed li li:hover > a,
      .navigation_container .rm-closed li li a:hover,
      .navigation_container .rm-closed li li a:focus,
      .navigation_container .rm-fullmenu li li.rm-focused > a,
      .navigation_container .rm-fullmenu li li:hover > a,
      .navigation_container .rm-fullmenu li li a:hover,
      .navigation_container .rm-fullmenu li li a:focus {
        text-decoration: none;
        background: #233140;
        color: white; }

/**
 * When JS is enabled
 *
 * 1. We can use display none because we set display block again with JS immediately after initiating the menu
 * 2. Display menu when initiated
 * 3. Display menu on "desktop"
 * 4. Display focused items
 */
.js .navigation_container {
  display: none;
  /* 1 */ }

.js .navigation_container.rm-initiated {
  display: block;
  /* 2 */ }

@media (min-width: 600px) {
  .js .navigation_container {
    display: block;
    /* 3 */ } }
.js .navigation_container .rm-focused {
  overflow: visible;
  /* 4 */ }

/**
 * When JS is either disabled or enabled
 *
 * 1. Relative to position li > ul items
 * 2. Hide overflowing content so we can display on tabbing
 * 3. Display on hover / focus
 * 4. Children should have position absolute to hide them
 */
.navigation_container li {
  position: relative;
  /* 1 */ }

@media (min-width: 600px) {
  .navigation_container li {
    overflow: hidden;
    /* 2 */ }

  .navigation_container li:hover, .navigation_container li:focus {
    overflow: visible;
    /* 3 */ } }
@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    /* 4 */ } }
.navigation_container {
  position: relative;
  z-index: 1; }

@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    z-index: -1;
    width: 100%; } }

.navigation_container li li {
  position: relative;
  float: left; }

.navigation_container .rm-focused > ul,
.navigation_container li:hover > ul {
  left: 0; }

.navigation_container li .rm-focused > ul,
.navigation_container li li:hover > ul {
  left: 100%;
  top: 0; }

/*# sourceMappingURL=responsivemenu.css.map */

/*# sourceMappingURL=demo.css.map */
#banner {
  height: 30rem;
  background-image: url("/IMAGES/new-masthead.jpg");
  object-fit: scale-down;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;
  margin-bottom: 3rem;
  
}



#banner h1 {
  font-family: Poppins, "Times New Roman", Times, serif;
  font-size: 6rem;
  color: #745d46;
  text-shadow: white 2px 2px 2px;
}

.logo {
  position: relative;
  top: 2rem;
  letter-spacing: 3px;
}
body {
  background: #ecf0f1;
  margin: 0;
  padding: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 16px;
  line-height: 24px;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

*, *:before, *:after {
  box-sizing: border-box; }

.site {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px; }

.rm-togglebutton,
.rm-subtoggle {
  margin: 5px;
  padding: 5px 10px;
  border: 1px solid black;
  outline: none;
  background: #fff;
  color: #0072B3;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer; }
  .rm-togglebutton:hover,
  .rm-subtoggle:hover {
    text-decoration: underline; }
  .rm-togglebutton:focus,
  .rm-subtoggle:focus {
    text-decoration: underline; }

.rm-subtoggle {
  margin: 5px;
  float: right; }
.navigation_container {
  background: #745d46;
  color: #fff;
  min-height: 40px;
  font-size: 2rem;
 }
  .navigation_container ul {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none; }
    @media (min-width: 600px) {
      .navigation_container ul {
        height: 40px; } }
  .navigation_container ul:before,
  .navigation_container ul:after {
    display: table;
    content: " "; }
  .navigation_container ul:after {
    clear: both; }
  .navigation_container .rm-closed li.rm-parent > a:after,
  .navigation_container .rm-fullmenu li.rm-parent > a:after {
    content: " \25bc"; }
  .navigation_container .rm-closed li.parent > a:after,
  .navigation_container .rm-fullmenu li.parent > a:after {
    content: " \25b6"; }
  .navigation_container li {
    padding: 0;
    clear: both; }
    @media (min-width: 600px) {
      .navigation_container li {
        height: 40px;
        float: left;
        clear: none; } }
    .navigation_container li.focused, .navigation_container li:hover a,
    .navigation_container li a:hover,
    .navigation_container li a:focus {
      background: #2c3e50; }
  .navigation_container .rm-opened li {
    float: none; }
  .navigation_container a {
    display: block;
    color: #fff;
    padding: 8px 16px;
    line-height: 24px;
    text-decoration: none;
    height: 40px; }
    .navigation_container a:after {
      font-size: 12px;
      vertical-align: middle;
      line-height: 24px;
      text-decoration: none; }
  .navigation_container .active a,
  .navigation_container .active a:hover,
  .navigation_container .active a:focus {
    background: #fff;
    color: #333;
    cursor: default; }
  .navigation_container .rm-closed li,
  .navigation_container .rm-fullmenu li {
    overflow: visible; }
    .navigation_container .rm-closed li ul,
    .navigation_container .rm-fullmenu li ul {
      height: auto;
      background: #2c3e50;
      padding: 0;
      width: 180px;
      border-top: none; }
      @media (min-width: 600px) {
        .navigation_container .rm-closed li ul,
        .navigation_container .rm-fullmenu li ul {
          transition: transform 0.1s cubic-bezier(0.195, 0.4, 0.45, 0.785);
          transform: scaleY(0);
          transform-origin: 0 0; } }
    .navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
    .navigation_container .rm-fullmenu li.rm-focused > ul,
    .navigation_container .rm-fullmenu li:hover > ul {
      display: block; }
      @media (min-width: 600px) {
        .navigation_container .rm-closed li.rm-focused > ul, .navigation_container .rm-closed li:hover > ul,
        .navigation_container .rm-fullmenu li.rm-focused > ul,
        .navigation_container .rm-fullmenu li:hover > ul {
          transform: scaleY(1); } }
    @media (min-width: 600px) {
      .navigation_container .rm-closed li.rm-focused li ul, .navigation_container .rm-closed li:hover li ul,
      .navigation_container .rm-fullmenu li.rm-focused li ul,
      .navigation_container .rm-fullmenu li:hover li ul {
        transform: scaleX(0); } }
    @media (min-width: 600px) {
      .navigation_container .rm-closed li.rm-focused li.rm-focused > ul, .navigation_container .rm-closed li.rm-focused li:hover > ul, .navigation_container .rm-closed li:hover li.rm-focused > ul, .navigation_container .rm-closed li:hover li:hover > ul,
      .navigation_container .rm-fullmenu li.rm-focused li.rm-focused > ul,
      .navigation_container .rm-fullmenu li.rm-focused li:hover > ul,
      .navigation_container .rm-fullmenu li:hover li.rm-focused > ul,
      .navigation_container .rm-fullmenu li:hover li:hover > ul {
        transform: scaleX(1); } }
    .navigation_container .rm-closed li li,
    .navigation_container .rm-fullmenu li li {
      float: none; }
      .navigation_container .rm-closed li li.rm-focused > a, .navigation_container .rm-closed li li:hover > a,
      .navigation_container .rm-closed li li a:hover,
      .navigation_container .rm-closed li li a:focus,
      .navigation_container .rm-fullmenu li li.rm-focused > a,
      .navigation_container .rm-fullmenu li li:hover > a,
      .navigation_container .rm-fullmenu li li a:hover,
      .navigation_container .rm-fullmenu li li a:focus {
        text-decoration: none;
        background: #233140;
        color: white; }

/**
 * When JS is enabled
 *
 * 1. We can use display none because we set display block again with JS immediately after initiating the menu
 * 2. Display menu when initiated
 * 3. Display menu on "desktop"
 * 4. Display focused items
 */
.js .navigation_container {
  display: none;
  /* 1 */ }

.js .navigation_container.rm-initiated {
  display: block;
  /* 2 */ }

@media (min-width: 600px) {
  .js .navigation_container {
    display: block;
    /* 3 */ } }
.js .navigation_container .rm-focused {
  overflow: visible;
  /* 4 */ }

/**
 * When JS is either disabled or enabled
 *
 * 1. Relative to position li > ul items
 * 2. Hide overflowing content so we can display on tabbing
 * 3. Display on hover / focus
 * 4. Children should have position absolute to hide them
 */
.navigation_container li {
  position: relative;
  /* 1 */ }

@media (min-width: 600px) {
  .navigation_container li {
    overflow: hidden;
    /* 2 */ }

  .navigation_container li:hover, .navigation_container li:focus {
    overflow: visible;
    /* 3 */ } }
@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    /* 4 */ } }
.navigation_container {
  position: relative;
  z-index: 1; }

@media (min-width: 600px) {
  .navigation_container li ul {
    position: absolute;
    left: -9999px;
    top: 100%;
    z-index: -1;
    width: 100%; } }

.navigation_container li li {
  position: relative;
  float: left; }

.navigation_container .rm-focused > ul,
.navigation_container li:hover > ul {
  left: 0; }

.navigation_container li .rm-focused > ul,
.navigation_container li li:hover > ul {
  left: 100%;
  top: 0; }

/*# sourceMappingURL=responsivemenu.css.map */

/*# sourceMappingURL=demo.css.map */
#banner {
  height: 30rem;
  background-image: url("/IMAGES/new-masthead.jpg");
  object-fit: scale-down;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;
  margin-bottom: 3rem;
  
}



#banner h1 {
  font-family: Poppins, "Times New Roman", Times, serif;
  font-size: 6rem;
  color: #745d46;
  text-shadow: white 2px 2px 2px;
}

.logo {
  position: relative;
  top: 2rem;
  letter-spacing: 3px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.