Template:BU17 template menubar 

         <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
     
     <style>
     .custom-wrapper {
         background-color: #ffd390;
         margin-bottom: 1em;
         -webkit-font-smoothing: antialiased;
         height: 2.1em;
         overflow: hidden;
         -webkit-transition: height 0.5s;
         -moz-transition: height 0.5s;
         -ms-transition: height 0.5s;
         transition: height 0.5s;
     }
     
     .custom-wrapper.open {
         height: 14em;
     }
     
     .custom-menu-3 {
         text-align: right;
     }
     
     .custom-toggle {
         width: 34px;
         height: 34px;
         position: absolute;
         top: 0;
         right: 0;
         display: none;
     }
     
     .custom-toggle .bar {
         background-color: #777;
         display: block;
         width: 20px;
         height: 2px;
         border-radius: 100px;
         position: absolute;
         top: 18px;
         right: 7px;
         -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
         -ms-transition: all 0.5s;
         transition: all 0.5s;
     }
     
     .custom-toggle .bar:first-child {
         -webkit-transform: translateY(-6px);
         -moz-transform: translateY(-6px);
         -ms-transform: translateY(-6px);
         transform: translateY(-6px);
     }
     
     .custom-toggle.x .bar {
         -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
     }
     
     .custom-toggle.x .bar:first-child {
         -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
         -ms-transform: rotate(-45deg);
         transform: rotate(-45deg);
     }
     
     @media (max-width: 47.999em) {
     
         .custom-menu-3 {
             text-align: left;
         }
     
         .custom-toggle {
             display: block;
         }
     
     }
     </style>

     <script>
     (function (window, document) {
     var menu = document.getElementById('menu'),
         WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
     
     function toggleHorizontal() {
         [].forEach.call(
             document.getElementById('menu').querySelectorAll('.custom-can-transform'),
             function(el){
                 el.classList.toggle('pure-menu-horizontal');
             }
         );
     };
     
     function toggleMenu() {
         // set timeout so that the panel has a chance to roll up
         // before the menu switches states
         if (menu.classList.contains('open')) {
             setTimeout(toggleHorizontal, 500);
         }
         else {
             toggleHorizontal();
         }
         menu.classList.toggle('open');
         document.getElementById('toggle').classList.toggle('x');
     };
     
     function closeMenu() {
         if (menu.classList.contains('open')) {
             toggleMenu();
         }
     }
     
     document.getElementById('toggle').addEventListener('click', function (e) {
         toggleMenu();
         e.preventDefault();
     });
     
     window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
     })(this, this.document);
     
     </script>