Skip to content

Instantly share code, notes, and snippets.

@hrehman200

hrehman200/index.html

Created April 6, 2022 20:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hrehman200/03f5c2388c30c8b61b4796411fb3201f to your computer and use it in GitHub Desktop.
Save hrehman200/03f5c2388c30c8b61b4796411fb3201f to your computer and use it in GitHub Desktop.
Download ZIP
A UI Enhancement for a Survey in Alchemer
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Fixed top navbar example for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/navbar-fixed/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap" rel="stylesheet">
<style>
/* NavBar Toggle X Animation */
.navbar-toggle {
border: none;
background: transparent !important;
transition: all 0.5s;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.5s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/* Navbar Shrink */
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
transition: all 0.5s;
text-transform: uppercase;
font-family: Josefin Sans;
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #d3d3d3;
}
.social a {
color: black;
font-size: 12px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
}
nav.navbar.shrink {
min-height: 35px;
transition: all 0.5s;
background: rgba(255, 255, 255, 0.8) !important;
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 11px;
transition: all 0.5s;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 12px 15px 8px 0;
transition: all 0.5s;
}
.navbar-brand>img {
max-width: 200px;
max-height: 137px;
margin-top: -5px;
transition: all 0.5s;
}
nav.shrink .navbar-brand>img {
width: 120px;
max-height: 25px;
margin-top: 5px;
transition: all 0.5s;
}
.shadowed-border {
padding: 70px 9px 0px 9px;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-radius: 15px 15px 15px 15px !important;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
margin-top: 100px;
}
.nav-link:hover {
color: #61CE70 !important;
}
.nav-container {
max-width: 80vw;
}
.hover-underline-animation {
display: inline-block;
position: relative;
padding: 0 !important;
margin: 1px 10px;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #61CE70;
transform-origin: bottom left;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md fixed-top bg-white primary-nav ml-auto">
<div class="container nav-container">
<a class="navbar-brand" href="#">
<img src="https://intranet.mission-mittelstand.de/wp-content/uploads/2020/06/cropped-mission-mittelstand-wir-veraendern-deutschland-logo-schwarz.png" width="200" />
<br />
<span style="width:200px;display:inline-block;"></span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarCollapse">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="#">TEAMS</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="#">UNTERNEHMENSPOLITIK</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="#">NEWS</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="#">FEEDBACK</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="#">LOGOUT</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap social">
<li class="nav-item"><a class="nav-link" href=""><i class="bi-facebook mr-1"></i></a> </li>
<li class="nav-item"><a class="nav-link" href=""><i class="bi-twitter"></i></a> </li>
<li class="nav-item"><a class="nav-link" href=""><i class="bi-instagram"></i></a> </li>
</ul>
</div>
</div>
</nav>
<main role="main" class="container shadowed-border">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>
</div>
</main>
<div class="container mt-5">Formular funktioniert nicht? Bitte nutze den folgenden <a href="#">Link</a>.</div>
<footer class="text-muted mt-5 border-top container">
<nav class="navbar navbar-expand-md text-center">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item"><a class="nav-link" href="#">ABC</a></li>
<li class="nav-item"><a class="nav-link" href="#">ABC</a></li>
<li class="nav-item"><a class="nav-link" href="#">ABC</a></li>
<li class="nav-item"><a class="nav-link" href="#">ABC</a></li>
</ul>
</nav>
<div class="text-center">
<p>Company 2022. All Rights Reserved.</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- <script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> -->
<script>
$(document).on("scroll", function() {
if ($(document).scrollTop() > 10) {
$(".primary-nav").addClass("shrink");
} else {
$(".primary-nav").removeClass("shrink");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment