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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<div class="ui-yakabox-makerspace">
<nav class="navbar navbar-inverse navbar-fixed-top no-border-radius bg-primary" 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="https://i.imgur.com/OMkVItB.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">
<div class="ui-yakabox-searchBox ui-helper-clearfix">
<form>
...
SCSS
.ui-yakabox-makerspace {
.bg-primary {
background-color: #00b8cf;
}
.ui-yakabox-video-container {
background: linear-gradient(to right,rgba(0,184,207,.6) 0%,rgba(199,217,43,.6) 100%);
margin: 0;
overflow:hidden;
display:block;
height: 360px;
}
.ui-yakabox-video-banner {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
display: flex;
}
.ui-yakabox-banner-description {
margin: auto;
}
h1 {
font-size: 100px;
color: #fff;
font-weight: 300;
letter-spacing: 1.2px;
max-width: 900px;
margin: auto;
text-align: center;
}
.bg-primary a, {
color: #000;
}
.bg-primary {
background-color: #00b8cf;
border-color: darken(#00b8cf, 10%);
}
.navbar {
min-height: 20px;
border-radius: 0px;
margin-bottom: 0px;
background-color: #333333;
&.subnav {
margin-top: 50px;
z-index: 1;
}
&.bg-primary {
background-color: #f4f7f6;
border-color: darken(#FFF, 10%);
color: #333;
}
}
.navbar-inverse .navbar-nav>li>a {
color: #333;
opacity: 1;
transition: 0.3s;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:active,
.navbar-inverse .navbar-nav>li>a:focus {
background-color: #ffffff;
color: #ccc;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
background-color: #ffffff;
color: #333;
}
.navbar.navbar-inverse .badge {
background-color: #00b8cf;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #333;
}
.navbar-inverse .navbar-toggle {
border-color: #333;
}
li.divider {
background-color: #ddd;
}
.container {
width: 100%;
}
#footer {
background-color: #eeeeee;
padding: 20px;
color: #666666;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: ...