Custom collapsed navbar (2 columns, with each column containing 2 columns of items)

I have a custom collapsed bootstrap navbar.

Not collapsed it looks like this (notice I have 2 sets; 1st is the menu items, 2nd is social media icons) normal. All good so far. Works in all browsers including IE11.

This is how it looks collapsed (notice again the 2 sets) collapsed.

However this is what it looks like in IE11 collapsed-ie11.

The structure I'm going for when collapsed is 2 columns. One column for menu items, one column for social icons. Each column is further split into 2 columns, where item1 and item2 are on the same line, then item3 and item4 are on the next line, etc. etc. Same with the social media icons.

As you can see from my CSS below, the only way I could find to do this (given my rookie CSS experience) was to use grid, but of course IE11 doesn't appear to like that. I used the site

    /* General */
    body,html,input {
      font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif
    }
    code,kbd,pre { font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace }
    
    /* Navigation Bar */
    .navbar {
      margin: 0 auto;
      border-bottom: 1px solid #d6d6d6;
      padding: 0;
      background-color: white;
    }
    
    /* Navigation bar centering with width */
    .navbar .container {
      max-width: 1200px;
    }
    .navbar .container .navbar-header {
    }
    
    /* Navigation bar logo size */
    .navbar img {
      height: 17px;
      margin-bottom: 4px;
    }
    
    /* Navigation bar desktop and collapsed menu */
    .navbar-collapse {
    }
    
    /* Navigation bar */
    .navbar-nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
    }
    
    /* Navigation item. */
    .nav-item i {
      font-size: 18px;
      color: black;
    }
    
    /* Navigation group left padding */
    .navbar-nav-left {
      margin-left: 10px;
    }
    
    /* Links */
    .nav-link {
      white-space: nowrap;
    }
    
    /* Hamburger Menu */
    .navbar-light .navbar-toggler {
      color: rgba(0,0,0,.5);
      vertical-align: middle;
      border: none; 
    }
    .navbar-toggler {
      padding: 0.25rem 0;
    }
    .navbar-toggler:active,
    .navbar-toggler:focus {
      outline: 0;
    }
    .navbar-toggler .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      margin: 4px 0 4px 0;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    .navbar-light .navbar-toggler .icon-bar {
      background: black
    }
    
    /* Optional hamburger menu animation from bars to close. */
    .navbar-toggler .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-transform-origin: 10% 10%;
          -ms-transform-origin: 10% 10%;
              transform-origin: 10% 10%;
    }
    
    .navbar-toggler .icon-bar:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
    }
    
    .navbar-toggler .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
      -webkit-transform-origin: 10% 90%;
          -ms-transform-origin: 10% 90%;
              transform-origin: 10% 90%;
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    
    .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
    
    /* Navigation items hover active etc */
    .navbar .nav-item.show > a {
      background: none !important;
    }
    .navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus {
      color: black !important;
    }
    .navbar .navbar-nav a.active, .navbar .navbar-nav a.active:hover {
      color: black !important;
      background: transparent !important;
    }
    
    /* If the width is not at least as wide as desktop, ..
    - Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
    - Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
    - Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
    - Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
       Collapse menu layout, animation, and separation. 
    */
    @media (max-width: 991.98px) {
      .navbar {
        padding-left: 16px;
        padding-right: 16px;
      }
      .navbar img {
        vertical-align: middle;
        margin-bottom: 0px;
      }
      .navbar-collapse {
        border-top: 1px solid #d6d6d6;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        -ms-grid-columns: 3fr 1fr;
        grid-template-columns: 3fr 1fr;
        padding-top: 5px;
        padding-bottom: 5px;
      }
      .navbar-collapse > *:nth-child(1) {
            -ms-grid-row:1;
            -ms-grid-column:1;
      }
      .navbar-collapse > *:nth-child(2) {
            -ms-grid-row:1;
            -ms-grid-column:2;
      }
      .navbar-nav .nav-link {
        padding: 0;
      }
      .navbar-nav {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 10px 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
      }
      .navbar-nav-left {
        margin-left: 0px;
      }
      .navbar-nav-right {
        justify-items: center;
        list-style: none;
        margin-left: 0!important;
      }
      .nav-link.nav-link-social i {
        font-size: 28px;
      }
    }
    
    /* Content default offset to make content visible */
    /* This is dynamically recalculated as needed. */
    /* We also hide any horizontal overflow due to swiping. */
    .content {
      padding-top: 169px;
      overflow-x: hidden;
      position: relative;
      width: 100%;
    }

and this is the relevant html that uses bootstrap 4.5.0 and font-awesome 4.7.0 -

<div class="fixed-top" id="header">
   <div class="navbar navbar-light navbar-expand-lg ml-auto">
      <div class="container">
         <button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="navbar" aria-expanded="true">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-header">
           <a id="navbar-brand" class="navbar-brand navbar-right" href="#"><img src="img/logo/logo-2.svg"></a>
         </div>
         <div id="navbar" class="navbar-collapse collapsable collapse show">
            <ul class="nav navbar-nav navbar-nav-left">
               <li class="nav-item">
                  <a class="nav-link nav-link-header" title="Store" href="/">
                     <i class="fa fa-shopping-cart"></i> Store</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-header" title="Support" href="/support">
                     <i class="fa fa-wrench"></i> Support</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-header" style="cursor:pointer;" title="Contact Us" data-toggle="modal" data-target="#contact_us">
                     <i class="fa fa-envelope-o"></i> Contact Us</a>
               </li>
            </ul>
            <ul class="nav navbar-nav navbar-nav-right ml-auto">
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="Facebook" href="https://www.facebook.com/" target="_blank">
                     <i class="fa fa-facebook"></i></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="Twitter" href="https://twitter.com/" target="_blank">
                     <i class="fa fa-twitter"></i></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="Instagram" href="https://www.instagram.com//" target="_blank">
                     <i class="fa fa-instagram"></i></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link nav-link-social" title="YouTube" href="https://www.youtube.com/" target="_blank">
                     <i class="fa fa-youtube-play"></i></a>
               </li>
            </ul>
          </div>
        </div>
      </div>

I'm pretty new to CSS and HTML, and took me a lot to figure out how to do this and so I was thrilled to get this looking good only to find out we still needed to support the 4-10% of people still using IE11.

I've tried to remove grid and replace with flex and flex-direction: column, with flex: 0 50%. This will work for each UL set of items, but it puts each set as a row. I could add containers or a table to get 2 columns, but then it will screw up my desktop version using the same code.

Without any further help, I think I'll have to use 2 methods, the above for non-IE, then an alternate for IE, by detecting the user-agent and showing the correct HTML/CSS. I'm really hoping there is a bootstrap method for doing this, that will work in all browsers including IE.

Bottom line is that I'm hoping someone can help me to tweak my CSS or HTML structure and still get the same result in both collapsed and non-collapsed. It's very important it has this 2 column look to it.

Thank you so much for reading all this and any help you can provide.

1 answer

  • answered 2020-10-16 06:20 Deepak-MSFT

    I try to test the issue with your sample code and I am able to produce the issue with the IE 11 browser.

    To fix the issue for the IE browser we need to set each element in grid-row and grid-column.

    For example:

    .cellA 
    {
          -ms-grid-row:1;
          -ms-grid-column:1;
    }
    
    <li class="nav-item cellA">
        <a class="nav-link nav-link-header" title="Store" href="/">
        <i class="fa fa-shopping-cart"></i> Store</a>
    </li>
    

    Below is the full modified code:

    CSS:

    /* General */
        body,html,input {
          font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif
        }
        code,kbd,pre { font-family:"Roboto Mono",SFMono-Regular,Consolas,Menlo,monospace }
        
        /* Navigation Bar */
        .navbar {
          margin: 0 auto;
          border-bottom: 1px solid #d6d6d6;
          padding: 0;
          background-color: white;
        }
        
        /* Navigation bar centering with width */
        .navbar .container {
          max-width: 1200px;
        }
        .navbar .container .navbar-header {
        }
        
        /* Navigation bar logo size */
        .navbar img {
          height: 17px;
          margin-bottom: 4px;
        }
        
        /* Navigation bar desktop and collapsed menu */
        .navbar-collapse {
        }
        
        /* Navigation bar */
        .navbar-nav {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          list-style: none;
        }
        
        /* Navigation item. */
        .nav-item i {
          font-size: 18px;
          color: black;
        }
        
        /* Navigation group left padding */
        .navbar-nav-left {
          margin-left: 10px;
        }
        
        /* Links */
        .nav-link {
          white-space: nowrap;
        }
        
        /* Hamburger Menu */
        .navbar-light .navbar-toggler {
          color: rgba(0,0,0,.5);
          vertical-align: middle;
          border: none; 
        }
        .navbar-toggler {
          padding: 0.25rem 0;
        }
        .navbar-toggler:active,
        .navbar-toggler:focus {
          outline: 0;
        }
        .navbar-toggler .icon-bar {
          display: block;
          width: 22px;
          height: 2px;
          border-radius: 1px;
          margin: 4px 0 4px 0;
          -webkit-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;
        }
        .navbar-light .navbar-toggler .icon-bar {
          background: black
        }
        
        /* Optional hamburger menu animation from bars to close. */
        .navbar-toggler .icon-bar:nth-of-type(1) {
          -webkit-transform: rotate(45deg);
              -ms-transform: rotate(45deg);
                  transform: rotate(45deg);
          -webkit-transform-origin: 10% 10%;
              -ms-transform-origin: 10% 10%;
                  transform-origin: 10% 10%;
        }
        
        .navbar-toggler .icon-bar:nth-of-type(2) {
          opacity: 0;
          filter: alpha(opacity=0);
        }
        
        .navbar-toggler .icon-bar:nth-of-type(3) {
          -webkit-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
                  transform: rotate(-45deg);
          -webkit-transform-origin: 10% 90%;
              -ms-transform-origin: 10% 90%;
                  transform-origin: 10% 90%;
        }
        
        .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
          -webkit-transform: rotate(0);
              -ms-transform: rotate(0);
                  transform: rotate(0);
        }
        
        .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
          opacity: 1;
          filter: alpha(opacity=100);
        }
        
        .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
          -webkit-transform: rotate(0);
              -ms-transform: rotate(0);
                  transform: rotate(0);
        }
        
        /* Navigation items hover active etc */
        .navbar .nav-item.show > a {
          background: none !important;
        }
        .navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus {
          color: black !important;
        }
        .navbar .navbar-nav a.active, .navbar .navbar-nav a.active:hover {
          color: black !important;
          background: transparent !important;
        }
        
        /* If the width is not at least as wide as desktop, ..
        - Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }
        - Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }
        - Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }
        - Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
           Collapse menu layout, animation, and separation. 
        */
        @media (max-width: 991.98px) {
          .navbar {
            padding-left: 16px;
            padding-right: 16px;
          }
          .navbar img {
            vertical-align: middle;
            margin-bottom: 0px;
          }
          .navbar-collapse {
            border-top: 1px solid #d6d6d6;
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            display: -ms-grid;
            display: grid;
            -ms-grid-rows: 1fr;
            grid-template-rows: 1fr;
            -ms-grid-columns: 3fr 1fr;
            grid-template-columns: 3fr 1fr;
            padding-top: 5px;
            padding-bottom: 5px;
          }
          .navbar-collapse > *:nth-child(1) {
                -ms-grid-row:1;
                -ms-grid-column:1;
          }
          .navbar-collapse > *:nth-child(2) {
                -ms-grid-row:1;
                -ms-grid-column:2;
          }
    
    
    
          .cellA {
                -ms-grid-row:1;
                -ms-grid-column:1;
          }
          .cellB {
                -ms-grid-row:1;
                -ms-grid-column:2;
          }
          .cellC {
                -ms-grid-row:2;
                -ms-grid-column:1;
          }
          .cellD {
                -ms-grid-row:1;
                -ms-grid-column:3;
          }
          .cellE {
                -ms-grid-row:1;
                -ms-grid-column:4;
          }
          .cellF {
                -ms-grid-row:2;
                -ms-grid-column:3;
          }
          .cellG {
                -ms-grid-row:2;
                -ms-grid-column:4;
          }
        
        
          .navbar-nav .nav-link {
            padding: 0;
          }
          .navbar-nav {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr 10px 1fr;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10px;
          }
          .navbar-nav-left {
            margin-left: 0px;
          }
          .navbar-nav-right {
            justify-items: center;
            list-style: none;
            margin-left: 0!important;
          }
          .nav-link.nav-link-social i {
            font-size: 28px;
          }
        }
        
        /* Content default offset to make content visible */
        /* This is dynamically recalculated as needed. */
        /* We also hide any horizontal overflow due to swiping. */
        .content {
          padding-top: 169px;
          overflow-x: hidden;
          position: relative;
          width: 100%;
        }
    

    HTML:

    <div class="fixed-top" id="header">
       <div class="navbar navbar-light navbar-expand-lg ml-auto">
          <div class="container">
             <button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="navbar" aria-expanded="true">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <div class="navbar-header">
               <a id="navbar-brand" class="navbar-brand navbar-right" href="#"><img src="test.ico"></a>
             </div>
             <div id="navbar" class="navbar-collapse collapsable collapse show">
                <ul class="nav navbar-nav navbar-nav-left">
                   <li class="nav-item cellA">
                      <a class="nav-link nav-link-header" title="Store" href="/">
                         <i class="fa fa-shopping-cart"></i> Store</a>
                   </li>
                   <li class="nav-item cellB">
                      <a class="nav-link nav-link-header" title="Support" href="/support">
                         <i class="fa fa-wrench"></i> Support</a>
                   </li>
                   <li class="nav-item cellC">
                      <a class="nav-link nav-link-header" style="cursor:pointer;" title="Contact Us" data-toggle="modal" data-target="#contact_us">
                         <i class="fa fa-envelope-o"></i> Contact Us</a>
                   </li>
                </ul>
                <ul class="nav navbar-nav navbar-nav-right ml-auto">
                   <li class="nav-item cellD">
                      <a class="nav-link nav-link-social" title="Facebook" href="https://www.facebook.com/" target="_blank">
                         <i class="fa fa-facebook"></i></a>
                   </li>
                   <li class="nav-item cellE">
                      <a class="nav-link nav-link-social" title="Twitter" href="https://twitter.com/" target="_blank">
                         <i class="fa fa-twitter"></i></a>
                   </li>
                   <li class="nav-item cellF">
                      <a class="nav-link nav-link-social" title="Instagram" href="https://www.instagram.com//" target="_blank">
                         <i class="fa fa-instagram"></i></a>
                   </li>
                   <li class="nav-item cellG">
                      <a class="nav-link nav-link-social" title="YouTube" href="https://www.youtube.com/" target="_blank">
                         <i class="fa fa-youtube-play"></i></a>
                   </li>
                </ul>
              </div>
            </div>
          </div>
    

    Output in the IE 11 browser:

    enter image description here

    Further, you can try to modify the code sample as per your own requirements.