How to create a second menu collapse?

by marsouin   Last Updated November 14, 2017 02:07 AM

I use on my site Drupal 8.4 the theme Bootstrap 3.6

I created two navigation menus (one on the left and one on the right).

My left menu works very well, it is placed on the left of the page and opens from left to right.

On the other hand the menu on the right poses problem, I would like that it is placed on the right of my page and opens of the right to the left.

How can I do this ?

style.css :

/*-------------------------------------------*
/* Navbar
/*-------------------------------------------*/

.navbar-header {
    float: none;
}

.navbar-left,
.navbar-right {
    float: none !important;
}

#block-togglenavigationfirstopen .navbar-toggle-first {
    display: block;
    float: left;
}

#block-togglenavigationsecondopen .navbar-toggle-second {
    display: block;
    float: right;
}

#block-togglenavigationfirstclose .navbar-toggle-first {
    display: block;
    float: right;
}

#block-togglenavigationsecondclose .navbar-toggle-second {
    display: block;
    float: left;
}

.region-navigation-collapsible-second #block-togglenavigationsecondclose {
    float: left;
}

.region-navigation-collapsible-second .logo {
    float: right !important;
}

.block-views-blockcompte-utilisateur-block-1 h2 {
    margin-top: 5px;
}

.navbar-collapse-first,
.navbar-collapse-second {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.navbar-collapse-first.collapse,
.navbar-collapse-second.collapse {
    display: none !important;
}

.navbar-nav {
    float: none !important;
    margin-top: 7.5px;
}

.navbar-nav>li {
    float: none;
}

.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.collapse.in {
    display: block !important;
}

.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#navbar-collapse-first h2,
#navbar-collapse-second h2 {
    font-size: 21px;
}

.collapse {
    visibility: hidden;
}

.collapse.in {
    visibility: visible;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}

.collapsing.width {
    -webkit-transition-property: width, visibility;
    transition-property: width, visibility;
    width: 0;
    height: auto;
}

#navbar {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid #000;
    -moz-box-shadow: 0px 0px 15px #555555;
    -webkit-box-shadow: 0px 0px 15px #555555;
    box-shadow: 0px 0px 15px #555555;
}

.navbar .logo {
    margin: 2px 0px;
    padding: 0px;
}

.navbar-default .navbar-toggle-first .icon-bar,
.navbar-default .navbar-toggle-second .icon-bar {
    background-color: #000000;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #2b9900;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #22b24c;
}

.navbar-default .navbar-nav > li > a {
    color: #000000;
    padding-top: 19.5px;
    padding-bottom: 19.5px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #2b9900;
    color: #ffffff;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #22b24c;
    color: #ffffff;
}

.navbar-default .navbar-toggle-first:hover, .navbar-default .navbar-toggle-first:focus,
.navbar-default .navbar-toggle-second:hover, .navbar-default .navbar-toggle-second:focus {
    background-color: #dddddd;
}

.region-navigation-logo {
    width: 137px;
    margin: auto;
}

.region-navigation-menu-first .navbar-toggle-first {
    position: relative;
    float: left;
    margin-left: 10px;
    padding: 9px 10px 3px 10px;
    margin-top: 10px;
    margin-bottom: 4px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
}

.region-navigation-menu-second .navbar-toggle-second {
    position: relative;
    float: right;
    margin-right: 10px;
    padding: 9px 10px 3px 10px;
    margin-top: 10px;
    margin-bottom: 4px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
}

.region-navigation-collapsible-first .navbar-toggle-first {
    position: relative;
    float: left;
    margin-left: 15px;
    padding: 9px 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
}

.region-navigation-collapsible-second .navbar-toggle-second {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
}

.navbar-collapse-first {
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    -webkit-overflow-scrolling: touch;
}

.navbar-collapse-second {
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    -webkit-overflow-scrolling: touch;
}

#navbar-collapse-first {
    z-index: 1031;
    position: fixed;
    left: 0;
    float: left;
    width: 250px;
    height: 100% !important;
    border-right: 1px solid #000000;
    border-top: 0;
    background: #ffffff;
    overflow-x: hidden !important;
    transition: 0.5s;
    outline: 9999px solid rgba(0,0,0,0.5);
}

#navbar-collapse-second {
    z-index: 1031;
    position: fixed;
    right: 0;
    float: right;
    width: 250px;
    height: 100% !important;
    border-left: 1px solid #000000;
    border-top: 0;
    background: #ffffff;
    overflow-x: hidden !important;
    transition: 0.5s;
    outline: 9999px solid rgba(0,0,0,0.5);
}

#navbar-collapse-second #block-formulaireexposeaccueil-groupepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-annoncepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-articlepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-discussionpage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-evenementpage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-itinerairepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-recettepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-boutiquepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-produitpage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-servicepage-1,
#navbar-collapse-second #block-formulaireexposeaccueil-profilpage-1 {
    float: left;
    margin-top: 20px;
}

#block-legendenavigationcollapsiblefirst,
#block-legendenavigationcollapsiblesecond {
    float: left;
    margin: 20px 0px 20px 0px;
    padding: 5px;
    border: 1px solid #000000;
}

#navbar-collapse-second .form-inline .form-control {
    width: 100%;
}

.navbar-right {
    margin-right: 0;
}

.logo img {
    height: 56px;
}

.region-navigation-menu-first {
    display: block;
    float: left;
}

.region-navigation-notification-first {
    display: block;
    float: left;
}

.region-navigation_logo {
    display: block;
}

.region-navigation-notification-second {
    display: block;
    float: right;
}

.region-navigation-menu-second {
    display: block;
    float: right;
}

.region-navigation-menu-first #block-views-block-menu-page-utilisateur-block-2,
.region-navigation-menu-first #block-views-block-menu-page-profil-block-2,
.region-navigation-menu-first #block-views-block-menu-page-groupe-block-2,
.region-navigation-menu-first #block-views-block-menu-page-contenu-block-2,
.region-navigation-menu-first #block-views-block-menu-page-boutique-block-2,
.region-navigation-menu-first #block-views-block-menu-page-produit-block-2 {
    position: absolute;
    z-index: 1;
    font-size: 10px;
    top: 9px;
    margin-left: 33px;
}

.region-navigation-menu-second #block-indicateurfiltre {
    position: absolute;
    z-index: 1;
    font-size: 10px;
    top: 9px;
}

#block-legendenavigationcollapsiblefirst .indicateur,
#block-legendenavigationcollapsiblesecond .indicateur {
    font-size: 10px;
}

.region-navigation-menu-first #block-views-block-menu-page-utilisateur-block-2 .fa-circle,
.region-navigation-menu-first #block-views-block-menu-page-profil-block-2 .fa-circle,
.region-navigation-menu-first #block-views-block-menu-page-groupe-block-2 .fa-circle,
.region-navigation-menu-first #block-views-block-menu-page-contenu-block-2 .fa-circle,
.region-navigation-menu-first #block-views-block-menu-page-boutique-block-2 .fa-circle,
.region-navigation-menu-first #block-views-block-menu-page-produit-block-2 .fa-circle,
.region-navigation-menu-second #block-indicateurfiltre .fa-circle,
#block-legendenavigationcollapsiblefirst .fa-circle,
#block-legendenavigationcollapsiblesecond .fa-circle {
    color: #FBA404;
}

.region-navigation-menu-first #block-views-block-menu-page-utilisateur-block-2 .fa-cogs,
.region-navigation-menu-first #block-views-block-menu-page-profil-block-2 .fa-cogs,
.region-navigation-menu-first #block-views-block-menu-page-groupe-block-2 .fa-cogs,
.region-navigation-menu-first #block-views-block-menu-page-contenu-block-2 .fa-cogs,
.region-navigation-menu-first #block-views-block-menu-page-boutique-block-2 .fa-cogs,
.region-navigation-menu-first #block-views-block-menu-page-produit-block-2 .fa-cogs,
.region-navigation-menu-second #block-indicateurfiltre .fa-filter,
#block-legendenavigationcollapsiblefirst .fa-cogs,
#block-legendenavigationcollapsiblesecond .fa-filter {
    color: #000000;
}

page.html.twig :

{#
/**
 * @file
 * Default theme implementation to display a single page.
 *
 * The doctype, html, head and body tags are not in this template. Instead they
 * can be found in the html.html.twig template in this directory.
 *
 * Available variables:
 *
 * General utility variables:
 * - base_path: The base URL path of the Drupal installation. Will usually be
 *   "/" unless you have installed Drupal in a sub-directory.
 * - is_front: A flag indicating if the current page is the front page.
 * - logged_in: A flag indicating if the user is registered and signed in.
 * - is_admin: A flag indicating if the user has permission to access
 *   administration pages.
 *
 * Site identity:
 * - front_page: The URL of the front page. Use this instead of base_path when
 *   linking to the front page. This includes the language domain or prefix.
 *
 * Navigation:
 * - breadcrumb: The breadcrumb trail for the current page.
 *
 * Page content (in order of occurrence in the default page.html.twig):
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title: The page title, for use in the actual content.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 * - messages: Status and error messages. Should be displayed prominently.
 * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the
 *   view and edit tabs when displaying a node).
 * - action_links: Actions local to the page, such as "Add menu" on the menu
 *   administration interface.
 * - node: Fully loaded node, if there is an automatically-loaded node
 *   associated with the page and the node ID is the second argument in the
 *   page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 *
 * Regions:
 * - page.header: Items for the header region.
 * - page.navigation: Items for the navigation region.
 * - page.navigation_collapsible: Items for the navigation (collapsible) region.
 * - page.highlighted: Items for the highlighted content region.
 * - page.help: Dynamic help text, mostly for admin pages.
 * - page.content: The main content of the current page.
 * - page.sidebar_first: Items for the first sidebar.
 * - page.sidebar_second: Items for the second sidebar.
 * - page.footer: Items for the footer region.
 *
 * @ingroup templates
 *
 * @see template_preprocess_page()
 * @see html.html.twig
 */
#}

{# Navigation (collapsible first) #}
{% if page.navigation_collapsible_first %}
  <div id="navbar-collapse-first" class="navbar-collapse-first collapse width navbar-fixed-top">
    {{ page.navigation_collapsible_first }}
  </div>
{% endif %}

{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
{# Navbar #}
{% if page.navigation_menu_first or page.navigation_indicator_first or page.navigation_logo or page.navigation_indicator_second or page.navigation_menu_second or page.navigation_collapsible_first or page.navigation_collapsible_second %}
  {% block navbar %}
    {%
      set navbar_classes = [
        'navbar',
        theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
        theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container,
      ]
    %}
    <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner">
      {% if not navbar_attributes.hasClass(container) %}
        <div class="{{ container }}">
      {% endif %}
      <div class="navbar-header">
        {{ page.navigation_menu_first }}
        {{ page.navigation_notification_first }}
        {{ page.navigation_logo }}
        {{ page.navigation_menu_second }}
        {{ page.navigation_notification_second }}
        {# .btn-navbar is used as the toggle for collapsed navbar content #}
      </div>

      {% if not navbar_attributes.hasClass(container) %}
        </div>
      {% endif %}
    </header>
  {% endblock %}
{% endif %}

{# Navigation (collapsible second) #}
{% if page.navigation_collapsible_second %}
  <div id="navbar-collapse-second" class="navbar-collapse-second collapse width navbar-fixed-top">
    {{ page.navigation_collapsible_second }}
  </div>
{% endif %}

{# Main #}
{% block main %}
  <div role="main" class="main-container {{ container }} js-quickedit-main-content">
    <div class="row">

      {# Header #}
      {% if page.header %}
        {% block header %}
          <div class="col-sm-12" role="heading">
            {{ page.header }}
          </div>
        {% endblock %}
      {% endif %}

      {# Sidebar First #}
      {% if page.sidebar_first %}
        {% block sidebar_first %}
          <aside class="col-sm-3" role="complementary">
            {{ page.sidebar_first }}
          </aside>
        {% endblock %}
      {% endif %}

      {# Content #}
      {%
        set content_classes = [
          page.sidebar_first and page.sidebar_second ? 'col-sm-6',
          page.sidebar_first and page.sidebar_second is empty ? 'col-md-9',
          page.sidebar_second and page.sidebar_first is empty ? 'col-md-9',
          page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
        ]
      %}
      <section{{ content_attributes.addClass(content_classes) }}>

        {# Highlighted #}
        {% if page.highlighted %}
          {% block highlighted %}
            <div class="highlighted">{{ page.highlighted }}</div>
          {% endblock %}
        {% endif %}

        {# Breadcrumbs #}
        {% if breadcrumb %}
          {% block breadcrumb %}
            {{ breadcrumb }}
          {% endblock %}
        {% endif %}

        {# Action Links #}
        {% if action_links %}
          {% block action_links %}
            <ul class="action-links">{{ action_links }}</ul>
          {% endblock %}
        {% endif %}

        {# Help #}
        {% if page.help %}
          {% block help %}
            {{ page.help }}
          {% endblock %}
        {% endif %}

        {# Content #}
        {% block content %}
          <a id="main-content"></a>
          {{ page.content }}
        {% endblock %}
      </section>

      {# Sidebar Second #}
      {% if page.sidebar_second %}
        {% block sidebar_second %}
          <aside class="col-md-3" role="complementary">
            {{ page.sidebar_second }}
          </aside>
        {% endblock %}
      {% endif %}
    </div>
  </div>
{% endblock %}

{% if page.footer %}
  {% block footer %}
    <footer class="footer {{ container }}" role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endblock %}
{% endif %}
Tags : theming 8


Related Questions


Features can export everything?

Updated March 26, 2015 10:02 AM


No image style found

Updated March 29, 2015 15:02 PM


Best way to have 5 or 6 themes in one site drupal 7

Updated April 09, 2015 22:03 PM