Shopping Cart

.mobile-donate-now a:hover {
        background-color: #27262c;
        color: #fff;
    }
    .customer-actions{
        margin: 0;
        min-width: 122px;
        border-left: none;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        padding: 2px 0;
    }
    .bar .bar-socials li.login-action a {
        width: 170px;;
    }
    .bar .bar-socials li.myaccnt-action a {
         width: 130px;
    }
     .bar .bar-socials li.cart-action a {
         width: 0px;
    }
    .learn-more
    {
        color: white;
        text-decoration: underline;
    }
    .learn-more:hover
    {
        color: white;
        text-decoration: underline;
    }
/*    .logo_wthree_agile
    {
        padding-left: 80px !important;
        padding-left: 0px;
    }*/
  </style>

<header id="header-area">
        <div class="top_header" id="home">
            
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="header-txt-banner">
                    <ul>
                        <li>ANNOUNCEMENT: Safety is our top priority. <a class="learn-more" href="Safety-COVID19">Learn More</a> <img src="/assets/NewImages/Topbanner_popup_mask.svg"/><span class="closee">×</span></li>
                    </ul>
                </div>
                
                    <div class="columns small-12">
                        <div class="nav_top_fx_w3layouts_agileits">
                            <div class="header-icon-left">
                                
                            </div>
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <div class="logo_wthree_agile">
                                    <a href="/" data-touchpoint="home" class="logo-link">
                                    <img src="/assets/images/common/logo.png" alt="Life Lab" class="main-logo">
                                    </a>
                                    <div class="mob-header-donate-btn">
                                 <a href="/donate"><button type="button" id="newsletter-form-submit" class="mob-donate-btn">Donate</button></a>
                                </div>
                                    
                                </div>

</div>
                            <div id="navbar" class="navbar-collapse collapse">
                                <div class="nav_right_top">
                                    <ul class="nav navbar-nav">
                                        <li>
                                            <a href="/">Home</a>
                                        </li>
                                        <li>
                                            <a class="scroll" href="/About-Us">About Us</a>
                                        </li>
                                        
                                        <li>
                                            <a class="scroll" href="/Services">Services</a>
                                        </li>
                                        
                                        <li>
                                            
                                            <a class="scroll" href="/Community">Community</a>
                                        </li>
                                         
                                        
                                         <li>
                                            <a class="scroll" href="/careers">Careers</a>
                                        </li>

<li>
                                            <a class="scroll contact-active" href="/contactUs">Contact Us</a>
                                        </li>
                                        
                                    </ul>
                                <div class="header-donate-btn">
                                 <a href="/donate"><button type="button" id="newsletter-form-submit" class="donate-btn">Donate</button></a>
                                </div>  
                                </div>

</div>
                            
                        </div>
                    </div>
                    
                
            </nav>
            <div class="clearfix"></div>
        </div>

</header>

<div class="clearfix"></div>
    
    
    <div id="main-container" class="" style="">
    </div>
    
    
    <script>
    $(function() {
         var url = window.location.href;
         jQuery(".navbar-nav a").each(function() {
            // checks if its the same on the address bar
            if (url==this.href+"/" ||url==this.href) {
                jQuery(this).closest("li").addClass("active");
                //for making parent of submenu active
               //jQuery(this).closest("li").parent().parent().addClass("active");
            }
        });
        var currentCategoryId = '${CURRENT_CATEGORYID}';
        jQuery('.navbar-collapse').css("visibility","visible");
        $("a[category-id='" + currentCategoryId + "']").addClass("active");

/** start global search event script **/

$("input[id='search']").keypress(function(event) {

var searchValue = $(this).val();
            var hasSearchValue = (!$.isBlank(searchValue)) ? true : false;

if (event.keyCode == 13 && !hasSearchValue) {
                event.preventDefault();
            }

if (event.keyCode == 13 && hasSearchValue) {
                return true;
            }
        });

var searchDefaultInputText = 'Search';
        $("input[id='search']").focusin(function() {
            var searchValue = $(this).val();
            var hasSearchValue = (!$.isBlank(searchValue)) ? true : false;

if (hasSearchValue) {
                if (searchValue == searchDefaultInputText) {
                    $(this).val("");
                }
            }

});

$("input[id='search']").focusout(function() {
            var searchValue = $(this).val();
            var hasSearchValue = (!$.isBlank(searchValue)) ? true : false;

if (!hasSearchValue) {
                $(this).val(searchDefaultInputText);
            }

});

$("button[id='butt-global-search']").click(function() {

var searchDefaultInputText = 'Search';
            var searchValue = $("input[id='search']").val();
            var hasSearchValue = (!$.isBlank(searchValue)) ? true : false;

if (hasSearchValue && searchValue != searchDefaultInputText) {
                //console.log("Trigger Search");
                $("#searchportlettag").submit();
            }
        });

/**  end global search event script  **/

$("div[id='header-icon']").hover(
            function() {
                $(this).find("img[id='header-icon-bw']").hide();
                $(this).find("img[id='header-icon-color']").show();
            }

,
            function() {

$(this).find("img[id='header-icon-color']").hide();
                $(this).find("img[id='header-icon-bw']").show();

}
        );

});
    </script>
<script>
var closebtns = document.getElementsByClassName("closee");
var i;

for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}
</script>

/** start global search event script **/

$("input[id='search']").keypress(function(event) {

var searchValue = $(this).val();
            var hasSearchValue = (!$.isBlank(searchValue)) ? true : false;

if (event.keyCode == 13 && !hasSearchValue) {
                event.preventDefault();
            }

if (event.keyCode == 13 && hasSearchValue) {
                return true;
            }
        });
    }
  </script>