header

<header class="vgr-header" role="banner">
    <div class="vgr-container">
        <div class="header__inner-wrapper">
            <div class="logotype-section">
                <div class="logotype-section__wrapper logotype-section__wrapper--site" data-onlyimage="">
                    <a class="logotype-section__link logotype-section__link--imagelink" href="/">
                        <div class="vgr-logo vgr-logo--svg vgr-logo--">
                            <a href="/" aria-label="Gå till startsidan">
    <img src="/img/logotype-white.svg" alt="Logotype">
  </a>
                        </div>

                    </a>
                </div>
            </div>
            <div class="header-btn-wrapper">
            </div>
        </div>
        <div id="main-search">
            <div class="search" data-isexpanded="false">
                <div class="search__wrapper">
                    <form method="get" class="search__form">
                        <label class="search__label">
          <span class="vgr-visually-hidden">Sök på webbplatsen</span>
          <input type="search" name="q" placeholder="Sök på webbplatsen" class="search-input-box search__field">
      </label>

                        <button class="vgr-button" type="submit">
<svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#search"></use></svg>
 
</button>

                    </form>
                </div>

            </div>
        </div>
    </div>
    <div class="main-navigation" id="vgr-main-navigation" data-module="primarynav" data-toggle-class="open" data-trigger="vgr-primary-navigation__link--js">
        <div class="main-navigation__wrapper">
            <div class="vgr-primary-navigation">
                <div class="vgr-container">
                    <nav role="navigation">
                        <ul class="vgr-unstyled-list vgr-clearfix">

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Startsida</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Jobba i VGR</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " data-selected aria-haspopup="true" aria-expanded="false" aria-hidden="true">Hälsa och vård</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Regional utveckling</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js open" aria-haspopup="true" aria-expanded="false" aria-hidden="true">Kollektivtrafik</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Politik</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Om VGR</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Aktuellt</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                            <li class="vgr-primary-navigation__item">
                                <a href="#" class="vgr-primary-navigation__link vgr-primary-navigation__link--js " aria-haspopup="true" aria-expanded="false" aria-hidden="true">Kontakt</a>

                                <div class="sub-nav" role="group" aria-expanded="false" aria-hidden="true">
                                    <ul class="sub-nav-group">

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                        <li class="vgr-primary-navigation__item">
                                            <a href="#" class="vgr-primary-navigation__link">Sub menu item</a>
                                        </li>

                                    </ul>
                                </div>

                            </li>

                        </ul>
                    </nav>
                </div>
            </div>

            <nav role="navigation" class="vgr-tool-navigation">
                <ul class="main-navigation__ul vgr-unstyled-list">

                    <!-- <li class="vgr-tool-navigation__li language-block__parent-li">
      <div class="vgr-toggle" data-togglestyle="fade" data-isexpanded="false">
        <button data-tab="" class="vgr-tool-navigation__link vgr-tool-navigation__btn" role="tab" tabindex="0" aria-controls="369ee233-8745-4bfc-9be2-8203d4ed5480">
          <svg class="vgr-tool-navigation__icon" aria-hidden="true" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none"></path>
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
          </svg>
          <span>Language</span>
        </button>
        <div class="language-block" data-panel="" id="369ee233-8745-4bfc-9be2-8203d4ed5480" tabindex="-1" role="tabpanel" aria-expanded="false">
          <div class="block__generic-body">
            <div class="block__header">
              <span class="block__heading block__heading--no-icon" lang="en">Change language</span>
            </div>
            <div class="block__row">
              <a href="/link/822d39e7dee042c5a577cef802961146.aspx?epslanguage=en" lang="en">Go to the english startpage</a>
            </div>
            <div class="block__row">
                <a href="/link/822d39e7dee042c5a577cef802961146.aspx?epslanguage=fi" lang="fi">Siirry suomi startpage</a>
            </div>
            <div class="block__row">
                <a href="/link/822d39e7dee042c5a577cef802961146.aspx?epslanguage=rom" lang="rom">Go to the romani chib startpage</a>
            </div>
            <div class="block__row">
                <a href="/link/822d39e7dee042c5a577cef802961146.aspx?epslanguage=se" lang="se">Go to the davvisámegiella startpage</a>
            </div>
            <div class="block__row">
                <a href="/link/822d39e7dee042c5a577cef802961146.aspx?epslanguage=yid" lang="yid">Go to the jiddisch startpage</a>
            </div>
            <div class="block__row">
                <a href="/link/822d39e7dee042c5a577cef802961146.aspx?epslanguage=fiu" lang="fiu">Go to the meänkieli startpage</a>
            </div>
          </div>
        </div>
      </div>
    </li> -->

                    <li class="vgr-tool-navigation__li">
                        <a class="vgr-tool-navigation__link" href="http://spoxy3.insipio.com/generator/sv/http://www.vgregion.se/halsa-och-vard/patientnamnden/stodpersoner/">
        <svg class="vgr-tool-navigation__icon" aria-hidden="true" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"></path>
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
        </svg>
        <span>Language</span>
      </a>
                    </li>

                    <li class="vgr-tool-navigation__li">
                        <a class="vgr-tool-navigation__link" href="http://spoxy3.insipio.com/generator/sv/http://www.vgregion.se/halsa-och-vard/patientnamnden/stodpersoner/">
        <svg class="vgr-tool-navigation__icon" aria-hidden="true" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
        <span>Lyssna</span>
      </a>
                    </li>

                    <li class="vgr-tool-navigation__li">
                        <a class="vgr-tool-navigation__link" href="/nyheter/press/">
        <svg class="vgr-tool-navigation__icon" aria-hidden="true" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
        <span>Press</span>
      </a>
                    </li>

                    <li class="vgr-tool-navigation__li">
                        <a class="vgr-tool-navigation__link" href="/webbkarta/">
        <svg class="vgr-tool-navigation__icon" aria-hidden="true" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
        <span>Webbplatskarta</span>
      </a>
                    </li>

                </ul>
            </nav>

        </div>
    </div>
</header>
<header class="vgr-header" role="banner">
  <div class="vgr-container">
    <div class="header__inner-wrapper">
      <div class="logotype-section">
        <div class="logotype-section__wrapper logotype-section__wrapper--site" data-onlyimage="">
          <a class="logotype-section__link logotype-section__link--imagelink" href="/">
            {% render "@logo--svg--white" %}
          </a>
        </div>
      </div>
      <div class="header-btn-wrapper">
      </div>
    </div>
    <div id="main-search">
      <div class="search" data-isexpanded="false">
        {% render "@search-bar" %}
      </div>
    </div>
  </div>
  <div class="main-navigation" id="vgr-main-navigation" data-module="primarynav" data-toggle-class="open" data-trigger="vgr-primary-navigation__link--js">
    <div class="main-navigation__wrapper">
      {% render "@primary-navigation" %}
      {% render "@tool-navigation" %}
    </div>
  </div>
</header>
/* No context defined for this component. */
  • Content:
    .vgr-header {
      color: #fff;
      padding: 0;
      background: #005c95;
      background-image: url('../img/dekorelement.svg');
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center 5%;
    
      .header__inner-wrapper {
        padding-top: 0;
        padding-bottom: 0;
        height: 7rem;
        box-sizing: border-box;
        margin-right: auto;
        margin-left: auto;
      }
    
      .logotype-section {
        float: left;
        height: 100%;
        width: auto;
        display: flex;
        align-items: center;
      }
    
      .vgr-logo {
        margin: 0;
        img {
          width: 13rem;
          height: 2.5rem;
          margin: 0;
        }
      }
    
      .main-navigation {
        display: block!important;
        background: #094e79;
      }
    
      .main-navigation__wrapper {
        position: relative;
        box-sizing: border-box;
        margin-right: auto;
        margin-left: auto;
        padding-right: 15px;
        padding-left: 15px;
        max-width: 1200px;
      }
    
      .vgr-tool-navigation {
        position: absolute;
        right: 15px;
        top: -6.9rem;
        max-height: inherit;
        display: block;
      }
    
      .search__form {
        position: absolute;
        display: flex;
        top: -3rem;
        right: 0;
      }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .vgr-banner {
      background: #005c95;
      color: #fff;
      font-family: Helvetica,Arial,sans-serif;
      padding: 0;
      background-image: url(/img/decorative.svg);
      background-repeat: no-repeat;
      background-size: 910px;
      background-position: center 0;
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: components/navigations/header/_header.scss
  • Size: 1.4 KB

There are no notes for this item.