Created
April 6, 2022 20:01
-
-
Save hrehman200/03f5c2388c30c8b61b4796411fb3201f to your computer and use it in GitHub Desktop.
A UI Enhancement for a Survey in Alchemer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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