htmlcssinternet-explorerbootstrap-4internet-explorer-11
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.
Solution
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:
Further, you can try to modify the code sample as per your own requirements.
- How do I add a default text to the beginning of an html text area?
- ES2015 import doesn't work (even at top-level) in Firefox
- Can I force a page break in HTML printing?
- Why HTML <button type="submit" >doesn't work with internet explorer?
- CSS Is Not Importing into HTML
- Set the default value of an input field
- How to force background image to stretch/compress to fit div, without keeping aspect ratio
- How to render raw html in the PyHTML library
- HTML CSS Layout breaks with parent of floated elements
- How does the "position: sticky;" property work?
- Content Security Policy error - violating directive: script-src 'self'
- Navigation arrows are not showing
- Fixing Border Radius in Safari?
- How to show the date picker if I click the parent div after explictly hiding the date type input in React?
- Array of data showing in console but not in HTML after passing it through dialog in Angular project
- Puppeteer.page.waitForSelector timeouts, even though the element is present
- How can I allow document.domain on a sandboxed iframe?
- problems with my button background color and hover and active states
- Ignore html tags in preg_replace
- Append element as sibling after element?
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- How do I auto scroll in Angular?
- Button click not showing/hiding content
- Will browser pull from cache if the same resource is being requested by a different origin?
- filter file upload for only text files
- Correct XPath query to fetch div inner text
- How to select(highlight) and copy ordered list numbers
- Why javascript is not loading for document.readyState==="complete"
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile