When page zoom equals 100%, menu items hidden in burger

src/main/sourceapp/1/js/crophub.js

@@ -677,14 +677,72 @@ var XUtil = {
 /* jshint ignore:end */
 
 $(document).click(function(e) {
-    if (!$(e.target).is($('#navigation-menu')) && !$(e.target).is($('.humburger-btn'))) {
+    if (!$(e.target).is($('#navigation-menu')) && !$(e.target).is($('.humburger-btn')) && !$(e.target).is($('.js-search-input'))) {
         if ($('#navbar').hasClass('in')) {
             $('#navbar').removeClass('in');
         }
     }
 });
 
+$(window).resize(function() {
+    var windowWidth = window.innerWidth;
+    if (windowWidth <= 989) {
+        $('.header-search').show();
+        $('.header-search-desktop').hide();
+    } else {
+        $('.header-search').hide();
+        $('.header-search-desktop').show();
+    }
+});
+
 $(document).ready(function() {
+    var submitIcon = $('.searchbox-icon');
+    var submitSubmit= $('.searchbox-submit');
+    var inputBox = $('.searchbox-input');
+    var searchBox = $('.searchbox');
+    var isOpen = false;
+    submitIcon.click(function(){
+        if (isOpen === false){
+            searchBox.addClass('searchbox-open');
+            submitIcon.css('background', '#3e3c37');
+            submitSubmit.css('background', '#3e3c37');
+            inputBox.focus();
+            isOpen = true;
+        } else {
+            searchBox.removeClass('searchbox-open');
+            inputBox.focusout();
+            isOpen = false;
+
+            setTimeout(function () {
+                submitIcon.css('background', '#2b2924');
+                submitSubmit.css('background', '#2b2924');
+            }, 100);
+        }
+    });
+    submitIcon.mouseup(function(){
+        return false;
+    });
+    searchBox.mouseup(function(){
+        return false;
+    });
+    $(document).mouseup(function(){
+        if (isOpen){
+            $('.searchbox-icon').css('display','block');
+            submitIcon.click();
+        }
+    });
+
+    $('body').on('input', '.searchbox-input', function() {
+        var inputVal = $('.searchbox-input').val();
+        inputVal = $.trim(inputVal).length;
+        if (inputVal !== 0){
+            $('.searchbox-icon').css('display','none');
+        } else {
+            $('.searchbox-input').val('');
+            $('.searchbox-icon').css('display','block');
+        }
+    });
+
   $('body').on('click', '.get_widget', function() {
     var clientId = $(this).val();
     $.ajax('/' + document.documentElement.lang + '/get_widget', {

src/main/sourceapp/1/styles/genesys.scss

@@ -1276,6 +1276,91 @@ $light-font-family: 'Roboto-Light';
 
   }
 
+  .header-search {
+    display: none;
+  }
+
+  .searchbox {
+    min-width: 50px;
+    width: 0;
+    height: 44px;
+    float: right;
+    overflow: hidden;
+    margin-top: 17px;
+    margin-right: 12px;
+    position: absolute;
+    right: 0;
+
+    -webkit-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
+    -moz-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
+    -ms-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
+    -o-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
+    transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
+
+    &:after {
+      color: #6d6c69;
+      content: "\f002";
+      font-family: FontAwesome;
+      font-size: 20px;
+      position: absolute;
+      top: -4px;
+      width: 26px;
+      height: 100%;
+      line-height: 52px;
+      pointer-events: none;
+      right: 5px;
+    }
+  }
+
+  .searchbox-input {
+    top: 0;
+    right: 0;
+    border: 0;
+    outline: 0;
+    background: #3e3c37;
+    width: 100%;
+    height: 50px;
+    margin: 0;
+    padding: 0 55px 0 8px;
+    font-size: 18px;
+    font-family: Roboto-Medium, serif;
+    color: #6d6c69;
+  }
+  .searchbox-input::-webkit-input-placeholder {
+    color: #6d6c69;
+  }
+  .searchbox-input:-moz-placeholder {
+    color: #6d6c69;
+  }
+  .searchbox-input::-moz-placeholder {
+    color: #6d6c69;
+  }
+  .searchbox-input:-ms-input-placeholder {
+    color: #6d6c69;
+  }
+
+  .searchbox-icon, .searchbox-submit {
+    width: 50px;
+    height: 50px;
+    display: block;
+    position: absolute;
+    top: 0;
+    font-size: 22px;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    outline: 0;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+    color: #6d6c69;
+    background: #2b2924;
+  }
+
+  .searchbox-open {
+    width: 467px;
+  }
 }
 //LTR and RTL rules outside genesys-page class
 
@@ -1289,6 +1374,52 @@ $light-font-family: 'Roboto-Light';
   }
 }
 
+.search-wrap {
+  position: relative;
+  float: right;
+
+  html[dir="rtl"] & {
+    float: left;
+  }
+
+  .searchbox {
+    html[dir="rtl"] & {
+      right: initial;
+      float: left;
+      left: 0
+    }
+
+    &:after {
+      html[dir="rtl"] & {
+        right: initial;
+        left: 0;
+      }
+    }
+  }
+
+  .searchbox-input {
+    html[dir="rtl"] & {
+      right: initial;
+      left: 0;
+      padding: 0 8px 0 0;
+    }
+  }
+
+  .searchbox-submit {
+    html[dir="rtl"] & {
+      right: initial;
+      left: 0;
+    }
+  }
+
+  .searchbox-icon {
+    html[dir="rtl"] & {
+      right: initial;
+      left: 0;
+    }
+  }
+}
+
 //forms
 form.form-horizontal .form-group {
   html[dir="ltr"] & {
@@ -3494,7 +3625,7 @@ table.accessions {
   }
 }
 //
-@media (min-width: 990px) and (max-width: 1919px) {
+@media (min-width: 990px) and (max-width: 1288px) {
     .genesys-page, .admin-page {
 
       .navbar-collapse.collapse, .navbar-collapse.collapsing {
@@ -3626,7 +3757,7 @@ table.accessions {
     }
   }
 
-  @media (max-width: 1919px) {
+  @media (max-width: 1288px) {
     .genesys-page .nav-menu .active {
       background-color: #33322D;
     }
@@ -4448,14 +4579,14 @@ table.accessions {
     }
   }
 
-@media (min-width: 1920px) {
+@media (min-width: 1289px) {
   #navbar {
     > div:first-child {
       display: flex;
 
       #navigation-menu {
         display: flex;
-        justify-content: center;
+        justify-content: flex-start;
         width: 100%;
       }
     }
@@ -4653,6 +4784,7 @@ table.accessions {
         }
 
         &#navbar .header-search {
+          display: block;
           float: none;
           padding: 0px;
           position: absolute;
@@ -4673,6 +4805,10 @@ table.accessions {
             }
           }
         }
+
+        &#navbar .header-search-desktop {
+          display: none;
+        }
       }
 
       #content {
@@ -5559,7 +5695,7 @@ table.accessions {
     }
   }
 
-  @media (min-width: 1920px) {
+  @media (min-width: 1289px) {
     .genesys-page {
       #content .intro-text {
         max-width: 625px;

src/main/webapp/WEB-INF/decorator/1/admin.jsp

@@ -66,7 +66,7 @@
 					<a class="navbar-brand nav-logo clearfix" href="<c:url value="/admin/" />"><img src="/html/1/images/GENESYS-ICON.svg" /><img src="/html/1/images/GENESYS-LOGO.svg" /></a>
 				</div>
 				<div id="navbar" class="collapse navbar-collapse">
-					<div class="col-md-7 no-space">
+					<div class="col-md-7 col-lg-10 no-space">
 						<div class="navbar-header">
 							<button type="button" class="humburger-btn navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 								<span class="sr-only">Toggle navigation</span>
@@ -135,7 +135,7 @@
 						</ul>
 					</div>
 
-					<div class="col-md-5 no-space">
+					<div class="col-md-5 col-lg-2 no-space">
 						<ul class="nav navbar-nav navbar-right">
 							<%@ include file="languages.jspf" %>
 						</ul>

src/main/webapp/WEB-INF/decorator/1/menu.jsp

@@ -13,7 +13,7 @@
 			<a class="navbar-brand nav-logo clearfix" href="<c:url value="/welcome" />"><img src="<c:url value="/html/1/images/GENESYS-ICON.svg" />" /><img src="<c:url value="/html/1/images/GENESYS-LOGO.svg" />" /></a>
 		</div>
 		<div id="navbar" class="collapse navbar-collapse">
-			<div class="col-md-6 no-space">
+			<div class="col-md-6 col-lg-9 no-space">
 				<div class="navbar-header">
 					<button type="button" class="humburger-btn navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 						<span class="sr-only">Toggle navigation</span>
@@ -131,7 +131,7 @@
 				</li> --%>
 				</ul>
 			</div>
-			<div class="col-md-6 no-space">
+			<div class="col-md-6 col-lg-3 no-space">
 
 				<ul class="nav navbar-nav navbar-right">
 					<%@ include file="languages.jspf" %>
@@ -228,13 +228,21 @@
 				<div class="header-search pull-left">
 					<form action="/acn/search2" class="form-inline">
 						<div class="form-group">
-							<input type="text" name="q" class="form-control" placeholder="Search Genesys..." />
+							<input name="q" class="form-control js-search-input" placeholder="Search Genesys..." />
 							<input type="submit" class="btn btn-primary" value="" />
 						</div>
 					</form>
 				</div>
-			</div>
-
+                <div class="search-wrap">
+                    <div class="header-search-desktop">
+                        <form action="/acn/search2" class="searchbox">
+                            <input type="search" name="q" class="searchbox-input" placeholder="Search Genesys..." />
+                            <input type="submit" class="searchbox-submit" value="" />
+                            <span class="searchbox-icon"></span>
+                        </form>
+                    </div>
+                </div>
+            </div>
 		</div>
 		<!--/.nav-collapse -->
 	</div>