Difference between revisions of "Template:TPHS San Diego/Navbar"
| Line 5: | Line 5: | ||
<style> | <style> | ||
| − | + | .logo | |
{ | { | ||
| − | + | display:inline-block; | |
| − | + | position:relative; | |
| − | + | top:-55px; | |
| + | left:30px; | ||
| + | padding-top:20px; | ||
| + | padding-bottom:20px; | ||
| + | height:150px; | ||
| + | width:180px; | ||
| + | float:left; | ||
| + | background-color:#FFF; | ||
| + | border-bottom-style:solid; | ||
| + | border-bottom-color:#ffffb1; | ||
| + | border-radius:50%; | ||
| + | background-color:#ffffb1; | ||
} | } | ||
| − | + | ||
| − | + | .navbar | |
| − | + | { | |
| − | + | margin-top:-8px; | |
| − | + | overflow: hidden; | |
| + | background-color:#FFF; | ||
| + | font-family: Arial; | ||
| + | font-size:16px; | ||
| + | padding-top:15px; | ||
| + | padding-bottom:20px; | ||
| + | padding-left:220px; | ||
| + | border-bottom-style:solid; | ||
| + | border-bottom-color:#ffffb1; | ||
| + | border-bottom-width:thick; | ||
} | } | ||
| − | . | + | /* Links inside the navbar */ |
| − | + | .navbar a | |
| − | + | { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | position:relative; | ||
| + | top:-10px; | ||
| + | float: left; | ||
| + | font-size: 18px; | ||
| + | font-weight:450; | ||
| + | color:black; | ||
| + | text-align: center; | ||
| + | padding: 14px 16px; | ||
| + | margin-right:200px; | ||
| + | text-decoration: none; | ||
} | } | ||
| − | + | /* The dropdown container */ | |
| + | .dropdown | ||
{ | { | ||
| − | + | float: left; | |
| − | + | overflow: hidden; | |
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | .dropdown | + | /* Dropdown button */ |
| − | + | .dropdown .dropbtn | |
| − | + | { | |
| − | + | display:inline-block; | |
| − | + | font-size: 16px; | |
| − | + | border: none; | |
| − | + | outline: none; | |
| − | + | color: black; | |
| − | + | font-weight:700; | |
| + | font-size:20px; | ||
| + | padding: 14px 16px; | ||
| + | background-color: inherit; | ||
| + | font-family: inherit; /* Important for vertical align on mobile phones */ | ||
| + | margin: 0; /* Important for vertical align on mobile phones */ | ||
| + | margin-right:75px; | ||
} | } | ||
| − | + | /* Add a red background color to navbar links on hover */ | |
| − | + | .navbar a:hover, .dropdown:hover .dropbtn | |
{ | { | ||
| − | + | background-color:rgba(255, 229, 7, 0.47); | |
| − | + | ||
} | } | ||
| − | .dropdown-content | + | /* Dropdown content (hidden by default) */ |
| − | + | .dropdown-content | |
| − | + | { | |
| − | + | display: none; | |
| − | + | position: absolute; | |
| − | + | background-color: #f9f9f9; | |
| − | + | min-width: 120px; | |
| − | + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
| − | + | z-index: 1; | |
} | } | ||
| − | + | /* Links inside the dropdown */ | |
| − | + | .dropdown-content a | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
{ | { | ||
| − | + | float: none; | |
| − | + | color: black; | |
| − | + | padding: 12px 16px; | |
| − | + | text-decoration: none; | |
| − | + | display: block; | |
| − | + | text-align: left; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | /* Add a grey background color to dropdown links on hover */ | |
| + | .dropdown-content a:hover | ||
{ | { | ||
| − | + | background-color: #ddd; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | /* Show the dropdown menu on hover */ | |
| + | .dropdown:hover .dropdown-content | ||
{ | { | ||
| − | + | display: block; | |
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 04:18, 12 October 2018
