JSFiddle - React, Tailwind, and code Playground

App Banner Drop-down Menu Option

by Meredith Crow

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<link rel="stylesheet" href="boothttps://yakabod.yakabox.com/css/scss/bootstrap.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/yakabox5.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/themes/app/ui.theme.banner.css">
<nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="/activityViewer"><img src="/images/yakaboxHeaderLogo.png" class="img-responsive"> <span class="bold text-white">Yakabox</span></a> </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">

          <div id="ybx-yakabox-site-search">
            <div data-reactroot="" class=" undefined">
              <form id="quickSearchForm999" name="SearchForm" action="/search/" method="POST"><input type="hidden" id="SearchData_BaseSearchRequirements" name="SearchData[BaseSearchRequirements]" value=""><input type="hidden" id="SearchData_RecordLimit"...

CSS

.ui-yakabox-appNav {
		background: #337AB7;
  	color: white;
  	padding: 20px;
  	height: 270px;
 }
 
.ui-yakabox-appNav .dropdown-menu {
    	height: 100px;
			z-index: 9999;
	}
	
 .ui-yakabox-appNav h2 a {
	  	color:#fff;
  }
	
.ui-yakabox-appNav .ui-yakabox-icon-link,
.ui-yakabox-appNav .ui-yakabox-link {
	  	color:#fff;
 	}  
  
	.ui-yakabox-appNav .ui-yakabox-icon-link:hover,
  .ui-yakabox-appNav .ui-yakabox-link:hover {
	  	background-color: #fff;
	  	width: 100%;
	  	border-radius: 5px;
	  	color: $link-color;
  }
  
.ui-yakabox-appNav h2, h3, h4 {
    	margin-top: 0
}
	
.ui-yakabox-appNav h2 {
		font-size: 64px;
}

.ui-yakabox-appNav .ui-app-banner-description {
    	max-height: 150px;
    	text-overflow: ellipsis;
    	overflow: auto;
			font-size: 18px;
}

.ui-yakabox-appNav .fa-fw {
			width: 2.5em;
 }
 
.ui-yakabox-appNav .badge {
			font-family: "Open Sans","Helvetica 		Neue",Helvetica,Arial,sans-serif;
			margin-left: -7px !important;
			background-color: #d9534f !important;
    	color: #fff !important;
			position:  unset !important;
}

.ui-yakabox-appNav .btn-primary {
    	margin-top: 0px;
			text-align: left;
			padding: 10px;
}

.ui-yakabox-appNav .subnav .col-md-2 a:last-child i.fa {
    	position: absolute;
    	right: -17px;
    	margin: 0;
    	color: #444444;
}

.navbar-inverse .navbar-nav > .active {
  color: #fff;
  background-color: #090909;
}

.carousel-control {
	width: 1%;
}

.carousel .left > i,
.carousel .right > i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.carousel .right > i {
  left: auto;
  right: 20px;
}

.ui-yakabox-app-menu-horizontal {
  max-height: 0;
  overflow: hidden;
  -webkit-animation: slideBannerDown 0.5s forwards;
  -webkit-animation-delay: 0s;
  animation: slideDown 0.5s forwards;
  animation-delay: 0s;
}

.dropdown-full .panel {
  margin: 0;
  border: 0;
  .panel-collapse > .container {
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 245px
 ...