Portal Themes - Dropdown menu for portal headers

Important note

By using these types of headers, you will note be able to link the menu items to the ones you enter in the back-office of your domain (https://yourdomain.opendatasoft.com/backoffice/customization/navigation/). These customed headers will recreate the navigation bar and you will have to enter the title and the link for each of them, in the HTML code.

Moreover, you will not be able to have a specific CSS class for the active items (no background/underline effect on an item title to highlight the active page).

Based on click - for default headers

How to use it

  1. Copy the content of the HEADER tab.
  2. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#header instead of ##menu##.
  3. Copy the content of the STYLESHEET tab.
  4. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#stylesheet.
  5. Replace the links and titles of the items menu in the HEADER tab.
Colors Header Footer Stylesheet 
  • #565656
    Text 
  • #0086D6
    Links 
  • #000000
    Titles 
  • #F6F8FB
    Page Background 
  • #0086D6
    Highlight 
  • #FFFFFF
    Boxes background 
  • #CBD2DB
    Boxes border 
  • #142E7B
    Section Titles 
  • #F6F8FB
    Section titles background 
  • #142E7B
    Header Background 
  • #FFFFFF
    Links in the header 
  • #FFFFFF
    Footer background 
  • #0086D6
    Links in the footer 
<ul class="ods-front-header__menu"
    ng-init="variables = { 'menuState' : false }">
  <!-- START - CLASSIC MENU ITEM -->
  <li class="ods-front-header__menu-item">
    <!-- ITEM MENU LINK HERE -->
    <a href="/explore" class="ods-front-header__menu-item-link">
      <!-- ITEM MENU FR TITLE HERE -->
      <span ng-if="'fr'|currentLanguage">Données</span>
      <!-- ITEM MENU EN TITLE HERE -->
      <span ng-if="'en'|currentLanguage">Data</span>
    </a>
  </li>
  <!-- END - CLASSIC MENU ITEM -->
  <!-- START - DROPDOWN MENU ITEM -->
  <!-- ITEM MENU FR AND EN TITLES HERE -->
  <li class="ods-front-header__menu-item dropdown-menu"
      ng-init="titre = 'Outils'; title = 'Tools'"
      ng-if="true">
    <!-- ITEM MENU LINK HERE -->
    <a class="ods-front-header__menu-item-link"
       href="#"
       ng-class="{'ods-front-header__menu-item-link--active': variables.menuState == title}"
       ng-click="variables.menuState = (variables.menuState == title ? variables.menuState = false : variables.menuState = title)">
      <span ng-if="'fr'|currentLanguage">{{titre}}</span>
      <span ng-if="'en'|currentLanguage">{{title}}</span>
      <i class="fa fa-angle-down" aria-hidden="true"></i>
    </a>
    <!-- START - SUBMENU -->
    <ul class="dropdown-menu-submenu"
        ng-class="{'dropdown-menu-submenu__active': variables.menuState == title}">
      <li class="dropdown-menu-submenu-item">
        <!-- ITEM SUBMENU LINK HERE -->
        <a href="/map">
          <!-- ITEM SUBMENU FR TITLE HERE -->
          <span ng-if="'fr'|currentLanguage">Cartographe</span>
          <!-- ITEM SUBMENU EN TITLE HERE -->
          <span ng-if="'en'|currentLanguage">Map builder</span>
        </a>
      </li>
      <li class="dropdown-menu-submenu-item">
        <!-- ITEM SUBMENU LINK HERE -->
        <a href="/chart">
          <!-- ITEM SUBMENU FR TITLE HERE -->
          <span ng-if="'fr'|currentLanguage">Créateur de graphique</span>
          <!-- ITEM SUBMENU EN TITLE HERE -->
          <span ng-if="'en'|currentLanguage">Chart builder</span>
        </a>
      </li>
    </ul>
    <!-- END - SUBMENU -->
  </li>
  <!-- END - DROPDOWN MENU ITEM -->
</ul>

NOTHING TO COPY/PASTE
/* DESKTOP SPECIFICS - STYLE OF ODS HEADER
========================================================================== */

.ods-responsive-menu-collapsible__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ods-front-header__portal-brand {
    display: flex;
    height: 40px;
    position: relative;
    top: 0;
}

/* DESKTOP SPECIFICS - STYLE OF DROPDOWN MENU
========================================================================== */

.ods-front-header__menu-item {
    position: relative;
}

.ods-front-header__menu-item-link--active {
    border-bottom: 0px solid;
    color: #FFF;
    opacity: 1;
}

li.dropdown-menu i {
    font-size: 1.2em;
    margin-left: 13.5px;
    color: var(--header-links);
}

ul.dropdown-menu-submenu {
    display: none;
    margin: 0;
    padding: 22px 28px;
    list-style: none;
    background-color: var(--header-background); 
}

ul.dropdown-menu-submenu.dropdown-menu-submenu__active {
    display: inherit; }

li.dropdown-menu-submenu-item {
    margin-bottom: 26px; }

li.dropdown-menu-submenu-item:last-child {
    margin-bottom: inherit; 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.ods-front-header__menu {
    display: flex;
    align-items: center; 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.dropdown-menu-submenu {
    position: absolute;
    top: 55px;
    left: 1px;
    z-index: 1001;
    filter: drop-shadow(0px 14px 8px rgba(37, 48, 59, 0.1)); 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .custom-menu-item-submenu {
    width: auto !important;
    top: 55px !important;
    left: 1px !important;
    padding: 20px !important;
    filter: drop-shadow(0px 0px 8px rgba(37, 48, 59, 0.2)) !important; }

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .dropdown-menu-submenu a {
    white-space: nowrap; 
}


/* MOBILE SPECIFICS
========================================================================== */
.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__logo {
    display: none;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu
{
    width: 100%;
}

Based on click - for Code Library custom headers

How to use it

  1. Copy the content of the HEADER tab.
  2. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#header instead of ##menu##.
  3. Copy the content of the STYLESHEET tab.
  4. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#stylesheet AFTER the existing code.
  5. Replace the links and titles of the items menu in the HEADER tab.
Colors Header Footer Stylesheet 
  • #565656
    Text 
  • #0086D6
    Links 
  • #000000
    Titles 
  • #F6F8FB
    Page Background 
  • #00C7B1
    Highlight 
  • #FFFFFF
    Boxes background 
  • #DEE5EF
    Boxes border 
  • #000000
    Section Titles 
  • #F6F8FB
    Section titles background 
  • #FFFFFF
    Header Background 
  • #000000
    Links in the header 
  • #F6F8FB
    Footer background 
  • #000000
    Links in the footer 
<!--- START - HEADER DROPDOWN MENU --->
<ul class="ods-front-header__menu custom-menu"
    ng-init="variables = { 'menuState' : false }">
  <!-- START - CLASSIC MENU ITEM -->
  <li class="custom-menu-item">
    <!-- ITEM MENU LINK HERE -->
    <a href="/explore">
      <!-- ITEM MENU FR TITLE HERE -->
      <span ng-if="'fr'|currentLanguage">Données</span>
      <!-- ITEM MENU EN TITLE HERE -->
      <span ng-if="'en'|currentLanguage">Data</span>
    </a>
  </li>
  <!-- END - CLASSIC MENU ITEM -->
  <!-- START - DROPDOWN MENU ITEM -->
  <!-- ITEM MENU FR AND EN TITLES HERE -->
  <li class="custom-menu-item dropdown-menu"
      ng-init="titre = 'Outils'; title = 'Tools'"
      ng-if="true"
      ng-class="{'custom-menu-item__active': variables.menuState == title}">
    <!-- ITEM MENU LINK HERE -->
    <a href=""
       ng-click="variables.menuState = (variables.menuState == title ? variables.menuState = false : variables.menuState = title)">
       <!-- ITEM MENU FR TITLE HERE -->
       <span ng-if="'fr'|currentLanguage">{{titre}}</span>
       <!-- ITEM MENU EN TITLE HERE -->
       <span ng-if="'en'|currentLanguage">{{title}}</span>
       <i class="fa fa-angle-down" aria-hidden="true"></i>
    </a>
    <!-- START - SUBMENU -->
    <ul class="custom-menu-item-submenu"
        ng-class="{'custom-menu-item-submenu__active': variables.menuState == title}">
      <li class="custom-menu-item-submenu-item">
        <!-- ITEM SUBMENU LINK HERE -->
        <a href="/map">
          <!-- ITEM SUBMENU FR TITLE HERE -->
          <span ng-if="'fr'|currentLanguage">Cartographe</span>
          <!-- ITEM SUBMENU EN TITLE HERE -->
          <span ng-if="'en'|currentLanguage">Map builder</span>
        </a>
      </li>
      <li class="custom-menu-item-submenu-item">
        <!-- ITEM SUBMENU LINK HERE -->
        <a href="/chart">
          <!-- ITEM SUBMENU FR TITLE HERE -->
          <span ng-if="'fr'|currentLanguage">Créateur de graphique</span>
          <!-- ITEM SUBMENU EN TITLE HERE -->
          <span ng-if="'en'|currentLanguage">Chart buildez</span>
        </a>
      </li>
    </ul>
    <!-- END - SUBMENU -->
  </li>
  <!-- END - DROPDOWN MENU ITEM -->
</ul>
<!--- END - HEADER DROPDOWN MENU --->

NOTHING TO COPY/PASTE
/* START - STYLE OF HEADER DROPDOWN MENU
========================================================================== */

li.custom-menu-item {
    position: relative;
}

li.custom-menu-item:first-child {
    margin-left: inherit; }

li.custom-menu-item > a {
    display: flex;
    align-items: center;
    color: var(--header-links);
    font-size: 0.8rem;
    border: none;
    letter-spacing: .8px;
    line-height: 59px;
    opacity: 1;
    margin: 0;
    text-transform: uppercase;
    padding: 0 20px;
}

li.dropdown-menu i {
font-size: 1.2em;
    margin-left: 13.5px;
    color: var(--header-links);
}


li.custom-menu-item.custom-menu-item__active > a,
li.custom-menu-item.custom-menu-item:hover > a{
    background-color: var(--highlight);
    color: #FFFFFF;
    text-decoration: none;
}

ul.custom-menu-item-submenu {
    display: none;
    margin: 0;
    padding: 22px 28px;
    list-style: none;
    background-color: white; }

ul.custom-menu-item-submenu.custom-menu-item-submenu__active {
    display: inherit; }

li.custom-menu-item-submenu-item {
    margin-bottom: 26px; }

li.custom-menu-item-submenu-item:last-child {
    margin-bottom: inherit; 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.custom-menu {
    display: flex;
    align-items: center; 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.custom-menu-item-submenu {
    width: 230px;
    position: absolute;
    top: 59px;
    left: 1px;
    z-index: 1001;
    filter: drop-shadow(0px 14px 8px rgba(37, 48, 59, 0.1)); 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .custom-menu .custom-menu-item-submenu {
    width: auto !important;
    top: 59px !important;
    left: 1px !important;
    padding: 20px !important;
    filter: drop-shadow(0px 0px 8px rgba(37, 48, 59, 0.2)) !important; }

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .custom-menu .custom-menu-item-submenu a {
    white-space: nowrap; 
}

/* END - STYLE OF HEADER DROPDOWN MENU
========================================================================== */

Based on hover - for default headers

How to use it

  1. Copy the content of the HEADER tab.
  2. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#header instead of ##menu##.
  3. Copy the content of the STYLESHEET tab.
  4. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#stylesheet".
Colors Header Footer Stylesheet 
  • #565656
    Text 
  • #0086D6
    Links 
  • #000000
    Titles 
  • #F6F8FB
    Page Background 
  • #0086D6
    Highlight 
  • #FFFFFF
    Boxes background 
  • #CBD2DB
    Boxes border 
  • #142E7B
    Section Titles 
  • #F6F8FB
    Section titles background 
  • #142E7B
    Header Background 
  • #FFFFFF
    Links in the header 
  • #FFFFFF
    Footer background 
  • #0086D6
    Links in the footer 
<!--- START - HEADER DROPDOWN MENU --->
<ul class="ods-front-header__menu custom-menu">
  <!-- START - CLASSIC MENU ITEM -->
  <li class="ods-front-header__menu-item">
    <!-- ITEM MENU LINK HERE -->
    <a href="#" class="ods-front-header__menu-item-link">
      <!-- ITEM MENU FR TITLE HERE -->
      <span ng-if="'fr'|currentLanguage">Données</span>
      <!-- ITEM MENU EN TITLE HERE -->
      <span ng-if="'en'|currentLanguage">Data</span>
    </a>
  </li>
  <!-- END - CLASSIC MENU ITEM -->
  <!-- START - DROPDOWN MENU ITEM -->
  <li class="ods-front-header__menu-item dropdown-menu">
    <!-- ITEM MENU LINK HERE -->
    <a href="" class="ods-front-header__menu-item-link">
      <!-- ITEM MENU FR TITLE HERE -->
      <span ng-if="'fr'|currentLanguage">Outils</span>
      <!-- ITEM MENU EN TITLE HERE -->
      <span ng-if="'en'|currentLanguage">Tools</span></a>
    <!-- START - SUBMENU -->
    <ul class="dropdown-menu-content">
      <!-- ITEM SUBMENU LINK HERE -->
      <a class="ods-front-header__menu-item-link" href="/map/">
        <!-- ITEM SUBMENU FR TITLE HERE -->
        <span ng-if="'fr'|currentLanguage">Cartographe</span>
        <!-- ITEM SUBMENU EN TITLE HERE -->
        <span ng-if="'en'|currentLanguage">Map builder</span>
      </a>
      <!-- ITEM SUBMENU LINK HERE -->
      <a class="ods-front-header__menu-item-link"
         href="/chart/"
         title="Créer des graphiques">
        <!-- ITEM SUBMENU FR TITLE HERE -->
        <span ng-if="'fr'|currentLanguage">Créateur de graphique</span>
        <!-- ITEM SUBMENU EN TITLE HERE -->
        <span ng-if="'en'|currentLanguage">Chart builder</span>
      </a>
    </ul>
    <!-- END - SUBMENU -->
  </li>
  <!-- END - DROPDOWN MENU ITEM -->
</ul>
<!--- END - HEADER DROPDOWN MENU --->

NOTHING TO COPY/PASTE
/* DESKTOP SPECIFICS - STYLE OF ODS HEADER
========================================================================== */

.ods-responsive-menu-collapsible__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ods-front-header__portal-brand {
    display: flex;
    height: 40px;
    position: relative;
    top: 0;
}

/* MOBILE SPECIFICS - STYLE OF ODS HEADER
========================================================================== */
.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__logo {
    display: none;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu
{
    width: 100%;
}

/* DESKTOP SPECIFICS - STYLE OF DROPDOWN MENU
========================================================================== */

.dropdown-menu-content {
    position: absolute;
    background-color: var(--header-background);
    filter: drop-shadow(0px 14px 8px rgba(37, 48, 59, 0.1));
    z-index: 1;
    padding: 10px 20px;
    min-width: 150px;  
}

.dropdown-menu-content a {
    color: var(--links);
    text-decoration: none;
    display: block;
    opacity:1;
    padding: 5px;
    font-size: 0.8rem;
    line-height: 35px;
}

.dropdown-menu-content a:hover {
    color: var(--links);
    text-decoration: underline;
}

@media screen and (min-width: 1000px){
    .dropdown-menu-content {
        display: none;
    }

    .dropdown-menu:hover  .dropdown-menu-content {
        display: block;
    }

    .dropdown-menu:hover .ods-front-header__menu-item-link {
        opacity: 1;
    }   
}

/* MOBILE SPECIFICS - STYLE OF DROPDOWN MENU
========================================================================== */

@media screen and (max-width: 1000px){    
    .dropdown-menu-content {
        position: relative;
        padding-left: 25px;
        filter: none;
    }
}

Based on hover - for Code Library customer headers

How to use it

  1. Copy the content of the HEADER tab.
  2. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#header instead of ##menu##.
  3. Copy the content of the STYLESHEET tab.
  4. Paste it in https://yourdomain.opendatasoft.com/backoffice/customization/theme/#stylesheet AFTER the existing code.
  5. Replace the links and titles of the items menu in the HEADER tab.
Colors Header Footer Stylesheet 
  • #565656
    Text 
  • #0086D6
    Links 
  • #000000
    Titles 
  • #F6F8FB
    Page Background 
  • #00C7B1
    Highlight 
  • #FFFFFF
    Boxes background 
  • #DEE5EF
    Boxes border 
  • #000000
    Section Titles 
  • #F6F8FB
    Section titles background 
  • #FFFFFF
    Header Background 
  • #000000
    Links in the header 
  • #F6F8FB
    Footer background 
  • #000000
    Links in the footer 
<!--- START - HEADER DROPDOWN MENU --->
<ul class="ods-front-header__menu custom-menu">
  <!-- START - CLASSIC MENU ITEM -->
  <li class="ods-front-header__menu-item" title="Accéder aux données">
    <!-- ITEM MENU LINK HERE -->
    <a href="#" class="ods-front-header__menu-item-link">
      <!-- ITEM MENU FR TITLE HERE -->
      <span ng-if="'fr'|currentLanguage">Données</span>
      <!-- ITEM MENU EN TITLE HERE -->
      <span ng-if="'en'|currentLanguage">Data</span>
    </a>
  </li>
  <!-- END - CLASSIC MENU ITEM -->
  <!-- START - DROPDOWN MENU ITEM -->
  <li class="ods-front-header__menu-item dropdown-menu">
    <!-- ITEM MENU LINK HERE -->
    <a href="" class="ods-front-header__menu-item-link">
      <!-- ITEM MENU FR TITLE HERE -->
      <span ng-if="'fr'|currentLanguage">Outils</span>
      <!-- ITEM MENU EN TITLE HERE -->
      <span ng-if="'en'|currentLanguage">Tools</span></a>
    <!-- START - SUBMENU -->
    <ul class="dropdown-content">
      <!-- ITEM SUBMENU LINK HERE -->
      <a class="ods-front-header__menu-item-link" href="/map/">
        <!-- ITEM SUBMENU FR TITLE HERE -->
        <span ng-if="'fr'|currentLanguage">Cartographe</span>
        <!-- ITEM SUBMENU EN TITLE HERE -->
        <span ng-if="'en'|currentLanguage">Map builder</span>
      </a>
      <!-- ITEM SUBMENU LINK HERE -->
      <a class="ods-front-header__menu-item-link" href="/chart/">
        <!-- ITEM SUBMENU FR TITLE HERE -->
        <span ng-if="'fr'|currentLanguage">Créateur de graphique</span>
        <!-- ITEM SUBMENU EN TITLE HERE -->
        <span ng-if="'en'|currentLanguage">Chart builder</span>
      </a>
    </ul>
    <!-- END - SUBMENU -->
  </li>
  <!-- END - DROPDOWN MENU ITEM -->
</ul>
<!--- END - HEADER DROPDOWN MENU --->

NOTHING TO COPY/PASTE
/* DESKTOP SPECIFICS - STYLE OF DROPDOWN MENU
========================================================================== */

.dropdown-content {
    position: absolute;
    background-color: #FFF;
    filter: drop-shadow(0px 14px 8px rgba(37, 48, 59, 0.1));
    z-index: 1;
    padding: 10px 20px;
    min-width: 150px;  
}

.dropdown-content a {
    color: var(--links);
    text-decoration: none;
    display: block;
    opacity:1;
    padding: 5px;
    font-size: 0.8rem;
    line-height: 35px;
}

.dropdown-content a:hover {
    text-decoration: underline;
    background-color: #FFF;
    color: var(--links);
}

@media screen and (min-width: 1000px){
    .dropdown-content {
        display: none;
    }

    .dropdown-menu:hover  .dropdown-content {
        display: block;
    }

    .dropdown-menu:hover .ods-front-header__menu-item-link {
         background-color: var(--highlight);
         color: #FFFFFF; /* Header link color when the link is active */
    }   
    .dropdown-menu:hover .dropdown-content a {
            background-color: #FFF;
    color: var(--links);
    }
}

/* MOBILE SPECIFICS - STYLE OF DROPDOWN MENU
========================================================================== */

@media screen and (max-width: 1000px){    
    .dropdown-content {
        position: relative;
        padding-left: 25px;
        filter: none;
    }
}