Special design of a compact navbar (2 columns, each column including 2 rows of items)

I have designed a unique collapsed bootstrap navbar that showcases my menu items and social media icons in two separate sets. When expanded, everything looks great across all browsers, including IE11.

However, when collapsed, the layout seems to be slightly off in IE11 compared to other browsers. I aimed for a design with two columns: one for menu items and another for social icons, each subdivided into pairs of items per line. Yet, due to my limited CSS expertise, I resorted to using grid, which does not fare well in IE11.

In an attempt to rectify this issue, I tried switching from grid to flexbox with a column direction. While this approach worked for individual sets of items, it presented them in rows instead of columns. Additional containers or tables could resolve this but would compromise the desktop version's appearance.

If no alternative solution emerges, I may need to implement two methods - one for modern browsers and another for IE - by detecting user agents and displaying corresponding HTML/CSS accordingly. Ideally, I seek a universal Bootstrap technique that delivers consistent results in all browsers, even legacy ones like IE.

In essence, I am seeking guidance on refining my CSS or HTML structure to maintain the desired two-column layout in both expanded and collapsed states. This aesthetic is crucial to the overall presentation of the navbar.

Thank you for taking the time to review my scenario and offering any insights or assistance in overcoming this challenge.

htmlcssinternet-explorerbootstrap-4internet-explorer-11

Answer №1

Upon testing your sample code, I was able to replicate the issue in the IE 11 browser.

To resolve this problem for IE browsers, it is necessary to specify each element in grid-row and grid-column.

Here is an example of how to do this:

.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>

The following code has been fully modified:

CSS:

(CSS code here)

HTML:

(HTML code here)

Output in IE 11 browser:

https://i.sstatic.net/O8wUI.gif

Feel free to adjust the sample code to suit your specific needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

javascripthtmlcsshyperlinkhtml-table

I am looking to include a popover within my modal using Bootstrap version 3.0.2

Hey there, I'm having an issue where the popover that should be inside the modal is actually appearing outside of it in the top left corner, not visible within the modal itself. Below is my index code: <button type="button" id="example" class="bt ...

javascriptjquerycsstwitter-bootstrap

Ways to prevent a particular link from functioning in HTML or JavaScript

Hey there, I am currently using a Gchat voice and video chat script. Check out my website if you're interested. The issue I'm facing is that someone logs into my chatroom and uses this flash link to crash other users' browsers. Whenever th ...

javascriptjqueryhtml.htaccess

The challenge of stacking elements using Div and a Jquery slider

I am facing an issue with the z-index on my website. The photo slider I implemented at the top seems to be causing the drop-down menu for administration to be hidden behind it. I have attempted to adjust the z-index of different divs, but so far, my chan ...

jqueryhtmlcssslider

Internet Explorer having trouble with onload function

Here is a snippet of code that I am working with: <html> <head> <style> #visibilitycontent{ visibility:hidden; } </style> </head> <body onload="visibilitychange()"> <div id="header"> This is the h ...

jqueryhtml

Issue with displaying Facebook meta image when sharing

Having trouble displaying a custom Facebook image on the share button. I am testing from localhost, could that be the issue (unable to test in production yet)? The image address is sourced from the web and I have tried various options. <meta property=" ...

htmlimagefacebookhttpmeta

Checkbox option to change background color of table cell

$('#selectall1').click(function(event) { if (this.checked) { $('.first').each(function() { this.checked = true; }); $('.second').each(function() { this.checked = false; }); $('.third&apos ...

jqueryhtmlcss

Access a designated div within an iframe following the submission of a form

I wanted to discuss my current setup... Currently, I have two pages in the project - index.html and cart.html. The issue arises when a form on index.html is submitted because it loads cart.html into a pop-up iframe. In this case, the entire cart.html page ...

jqueryformsiframehtml

Store the injected HTML within a PRE tag as a variable

My question pertains to a DIV HTML element that is responsible for displaying some HTML content from a variable: <div contenteditable="true" ng-bind-html="renderHtml(currentOperation.description)" ng-model='currentOperation.description&a ...

htmlangularjsbindpre

Manipulating the visibility of a template with ng-show and ng-hide

Is it possible to use ng-show and ng-hide in order to display or hide an HTML template, particularly if that template is a separate HTML file? I am attempting to divide my HTML file into two sections and toggle their visibility based on an event. ...

htmlangularjs

Header and footer on iPad are not extending to full width even when set to 100% width

Upon viewing this link on an iPad, you may observe that the header does not span the full width of the page, leaving a noticeable pixel gap on the right side. The same issue is present with the footer. It is puzzling to me because both elements are set to ...

htmlcss

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

xmlangularjshtmlxslt

Unable to bring JavaScript into an HTML document

I am diving into the fundamentals of JS and HTML, starting with a simple script. Here is my test.js file: document.getElementById("test").innerHTML = "Loaded js file"; And here is my test.html: <!DOCTYPE HTML> <html lang="de"> <head> & ...

javascriptjqueryhtml

Issue: CSS breaking in Node.js Express app when navigating with multiple child paths or parameter paths in the route.Description: Encounter

When attempting to load a page like /patient_profile, the CSS loads correctly. However, when continuing the path to /patient_profile/settings_patient_profile, the CSS breaks. Both pages mentioned are the same file, just testing the routing. The route is m ...

cssnode.jsexpressejs

Enabling and disabling links in a Bootstrap dropdown menu with dynamic functionality on click

One interesting feature of bootstrap is that it allows users to disable links within its dropdown menu component by simply adding a class="disabled" into the corresponding <li> tag. I am looking to create some Javascript code so that when a user sel ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to ensure my checkboxes are positioned on individual lines?

I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...

htmlcsscheckboxvertical-alignment

Migrating from PHP/MySQL to PDO: A Smooth Transition

I am a beginner in PHP/MySQL and I have some queries. I was watching a YouTube tutorial on creating a basic dynamic website that retrieves data from a MySQL database and displays it on a single PHP index page. I followed the tutorial up to the point wher ...

phpmysqlcsspdocontent-management-system

Troubleshooting Issue with Post/Get Request in AJAX and Flask Framework

My current project involves building a YouTube scraper webpage purely for educational purposes. I have created a web page with a text box to enter search queries and a search button. When the button is clicked, an Ajax post request is sent with the text bo ...

pythonhtmlajaxflaskpost

Is there a way to set up a saving path using xhtml2pdf and provide a download link

I am currently using xhtml2pdf to convert my form into a PDF file. By default, it saves the PDF in the same location as my manage.py file. My question is how can I change the saving path to send the PDF to my Desktop, for example (running MacOSX). Below ...

pythonhtmldjangopdf