Header (GR)
CODE
×
HTML
<div class='header-gr sticky-header'> <div class='signet-oe-3'> <img class='logo' alt='Logo des Kantons Bern' src='img/Kanton-Bern.svg'> <div class='logo-caption'>Grosser Rat</div> </div> <div class='service-nav' role='list'> <a class='service-menue red' href='#' role='listitem'>Leichte Sprache</a> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <a class='service-menue i2' href='#' role='listitem'>Jobs</a> <a class='service-menue login' href='#' role='listitem'>BE-Login</a> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div> <div class='main-nav' role="list"> <a class='main-menue i1' href='#' role='listitem'>E-Services und Dienstleistungen</a> <a class='main-menue i2' href='#' role='listitem'>Themen</a> <a class='main-menue i3' href='#' role='listitem'>Über uns</a> <a class='search-icon-mm' href='#' role='listitem'></a> </div> <div class='mobile-nav'> <a class='hamburger-icon'></a> <a class='search-icon-mobile'></a> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.header-gr.sticky-header { padding-top: 10px; height: 124px; margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); } } @media screen and (max-width: 767px) { div.header-gr.sticky-header { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); } } @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } } a.service-menue { font-size: 14px; line-height: 16px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(0,0,0,1); display:inline-block; text-decoration:none !important; height: 18px; line-height: 1.5; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; transform: scaleX(0); transition: transform 100ms ease-in-out; } a.service-menue:hover::after, a.service-menue:focus::after, a.service-menue:active::after { transform: scaleX(1); } a.main-menue { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: rgba(0,0,0,1); letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; transform: scaleX(0); transition: all 150ms ease-in-out; } a.main-menue:hover::after, a.main-menue:focus::after, a.main-menue:active::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.service-nav { display:none; } div.main-nav { display:none; } div.mobile-nav { display:block; } } @media screen and (max-width: 767px) { div.mobile-nav { top: 20px; } } img.logo { cursor:pointer; width: 150px; } div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.search-icon-mm { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center 22px; background-repeat: no-repeat; background-size: 40px 40px; width: 83px; height: 82px; margin-top: -10px; display:inline-block; vertical-align:middle; } a.hamburger-icon { background-image: url('../img/hamburger-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; display:inline-block; float:right; } a.search-icon-mobile { background-image: url('../img/search-mobile.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; display:inline-block; width: 32px; height: 32px; margin-right: 25%; float:right; } a.service-menue.red { color: var(--red); } a.search-icon-mm:hover, a.search-icon-mm:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.hamburger-icon:hover, a.hamburger-icon:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.search-icon-mobile:hover, a.search-icon-mobile:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.main-menue.i1:after { display: block; content: ''; border: 1px solid #EA161F; border-radius: 3px; height: 2px; background-color: #EA161F; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } @media screen and (max-width: 1119px) { img.logo { width: 110px; } } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue { font-size: 24px; line-height: 28px; color: var(--black); letter-spacing: 0.01rem; word-spacing: 0.025rem; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; } a.main-menue:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a.main-menue { text-decoration: none !important; } div.logo-caption { font-size: 16px; line-height: 17px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); margin-top: 19px; max-width: 335px; } @media screen and (max-width: 1119px) { div.logo-caption { margin-top: 12px; max-width: 210px; font-size: 12px; line-height: 13px; letter-spacing: 0.01rem; word-spacing: 0.025rem; } }
JS
Header (GR)
Erstellt: 19.07.2021 - 21:16 Uhr
Letzte Änderung: 21.11.2021 - 12:24 Uhr
×
Grosser Rat
Leichte Sprache
Kontakt
Startseite Kanton Bern
Jobs
BE-Login
DE
|
FR
|
EN
E-Services und Dienstleistungen
Themen
Über uns