Difference between revisions of "Template:Groningen/Navbar"
Jan Vuckovic (Talk | contribs) |
Jan Vuckovic (Talk | contribs) |
||
| Line 21: | Line 21: | ||
</script> | </script> | ||
| − | <style> | + | <style> |
| − | /*Nav bar styles*/ | + | /*Nav bar styles*/ |
| − | * { | + | * { |
| − | + | box-sizing: border-box; | |
| − | + | padding: 0; | |
| − | + | margin: 0; | |
| − | } | + | } |
| − | body { | + | body { |
| − | + | background: #ffffff; | |
| − | + | font-family: Montserrat; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | } | + | } |
| − | content { | + | content { |
| − | + | width: 100%; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | } | + | } |
| − | + | .dropdwn { | |
| − | + | display: block; | |
| − | + | width: 190px; | |
| − | + | padding: 0 60px 0 60px; | |
| − | + | color: #000000; | |
| − | } | + | text-decoration: none; |
| + | line-height: 85px; | ||
| + | font-size: 18px; | ||
| + | } | ||
| − | + | .dropdwnSub { | |
| − | + | display: block; | |
| − | + | padding: 12px 14px 12px 14px; | |
| − | } | + | color: #000000; |
| + | text-decoration: none; | ||
| + | line-height: 30px; | ||
| + | font-size: 16px; | ||
| + | } | ||
| − | + | nav { | |
| − | + | height: 85px; | |
| − | + | background: #fdf8f0; | |
| − | + | width: 100%; | |
| − | + | font-family: 'Montserrat' !important; | |
| − | + | text-decoration: none !important; | |
| − | + | color: #000000 !important; | |
| − | + | display: flex; | |
| − | } | + | flex-wrap: wrap; |
| + | justify-content: space-between; | ||
| + | } | ||
| − | . | + | nav ul.mainMenu { |
| − | + | padding: 0; | |
| − | + | margin: 0; | |
| − | + | float: right; | |
| − | + | list-style: none; | |
| − | + | } | |
| − | + | ||
| − | } | + | |
| − | + | nav li a { | |
| − | + | display: inline-block; | |
| − | + | text-decoration: none !important; | |
| − | + | color: #000000 !important; | |
| − | } | + | } |
| − | nav { | + | nav .mainMenu li { |
| − | + | background: #fdf8f0; | |
| − | + | position: relative; | |
| − | + | list-style: none; | |
| − | + | display: inline-block; | |
| − | + | margin: 0 !important; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | nav .mainMenu { | + | nav .mainMenu li a:hover { |
| − | + | background: #f7eee2; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | nav | + | nav ul ul { |
| − | + | position: absolute; | |
| − | + | top: 80px; | |
| − | + | display: none; | |
| − | } | + | width: 100%; |
| + | } | ||
| − | nav | + | nav ul li:hover>ul { |
| − | + | display: block; | |
| − | + | visibility: visible; | |
| − | + | opacity: 1; | |
| − | + | transition: ease-in-out .35s; | |
| − | + | pointer-events: all !important; | |
| − | } | + | } |
| − | nav | + | nav ul ul li { |
| − | + | width: 100%; | |
| − | } | + | float: right; |
| + | display: list-item; | ||
| + | position: relative; | ||
| + | right: 15px; | ||
| + | } | ||
| − | nav ul ul { | + | nav ul li ul li { |
| − | + | padding: 0 !important; | |
| − | + | margin: 0 !important; | |
| − | + | } | |
| − | + | ||
| − | } | + | |
| − | + | .titleNav, | |
| − | + | .logoNav { | |
| − | + | display: inline-block; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | #top_title { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .columnNav { | |
| − | + | display: flex; | |
| − | + | width: fit-content; | |
| − | } | + | float: left; |
| + | padding: 0; | ||
| + | } | ||
| + | .logoNav { | ||
| + | margin: 5px 5px 5px 30px; | ||
| + | } | ||
| − | + | .titleNav { | |
| + | font-family: Montserrat !important; | ||
| + | font-size: 24px; | ||
| + | margin: auto 0 auto 0 !important; | ||
| + | padding-right: 30px; | ||
| + | } | ||
| − | + | button.mainMenuMobile { | |
| − | + | display: none; | |
| − | + | margin: auto 50px auto 50px; | |
| − | + | height: fit-content; | |
| − | + | border: 0; | |
| − | } | + | background: none; |
| + | } | ||
| − | + | button.mainMenuMobile i { | |
| − | + | font-size: 24px; | |
| − | + | } | |
| − | + | ||
| − | } | + | |
| − | + | /*The following code hides p.titleNav when the screen width is less than 1100px.*/ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | @media(max-width: 1100px) { | ||
| + | p.titleNav { | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
| − | /* | + | /*The following code put a.dropdwn closer together when the screen is less than 880px*/ |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | @media(max-width: 880px) { | |
| − | . | + | a.dropdwn { |
| − | + | width: 150px; | |
| − | } | + | padding: 0 30px 0 30px; |
| + | } | ||
| + | } | ||
| − | + | /*The follwing code puts the navigation menu into a mobile version when the screen is less than 750px*/ | |
| − | + | ||
| − | + | ||
| − | . | + | @media(max-width: 750px) { |
| − | + | button.mainMenuMobile { | |
| − | + | display: block; | |
| − | + | } | |
| − | + | ||
| − | } | + | |
| − | . | + | nav .mainMenu { |
| − | + | width: 100%; | |
| − | } | + | display: none; |
| + | flex-wrap: wrap; | ||
| + | flex-direction: column; | ||
| + | } | ||
| − | . | + | a.dropdown { |
| − | + | width: 100%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | nav button:hover + .mainMenu { | |
| + | display: flex; | ||
| + | visibility: visible; | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | } | ||
| − | |||
| + | </style> | ||
| + | </head> | ||
| − | + | <body> | |
| − | + | <div> | |
| − | + | <nav> | |
| − | + | <div class="columnNav"> | |
| − | <body> | + | <a href="https://2021.igem.org/Team:Groningen"><img class="logoNav" src="https://static.igem.org/mediawiki/2021/1/17/T--Groningen--LogoByeMonia.png" alt="" width="76" height="auto"></a> |
| − | + | <p class="titleNav">Groningen 2021</p> | |
| − | + | </div> | |
| − | + | <button class="mainMenuMobile" type="button"> | |
| − | + | <i class="fas fa-bars"></i> | |
| − | + | </button> | |
| − | + | <ul class="mainMenu" style="top: -100%"> | |
| − | + | <li><a class="dropdwn" href="#">Project</a> | |
| − | + | <ul> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Description">Description</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Model">Model</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Implementation">Implementation</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Medals_and_Awards">Medals</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li><a class="dropdwn" href="#">Wet lab</a> | |
| − | + | <ul> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Engineering">Engineering</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Notebook">Notebook</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Experiments">Experiments</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Results">Results</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Parts">Parts</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Safety">Safety</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li><a class="dropdwn" href="#">People</a> | |
| − | + | <ul> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Team">Team</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Attributions">Attributions</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Collaborations">Collaborations</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Partnership">Partnership</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Sponsors">Sponsors</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li><a class="dropdwn" href="#">Outreach</a> | |
| − | + | <ul> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Human_Practices">Human Practices</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Gold_Human_Practices">Integrated Human Practices</a></li> | |
| − | + | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | </ul> | |
| − | + | <div class="closeMenu" style="display:none"><i class="fas fa-times"></i></div> | |
| − | + | </nav> | |
| − | + | </div> | |
| − | + | </body> | |
| − | + | ||
| − | </body> | + | |
</html> | </html> | ||
Revision as of 18:38, 13 October 2021