IE11 Pro Header Formatting - Center Align Issue

Support
#1

Hello!

I’ve been working on correcting the subnav issues in Pro with IE11.

The code provided in this thread has been very helpful: https://theme.co/apex/forum/t/internet-explorer-11-drop-down-issue-in-pro/3231/9

ul.x-menu .x-dropdown {
position: absolute !important;
left: 0px !important;
top: 100% !important;

}

With that code in place the subnavs are now formatting properly, however the text in the subnav is center aligned.

How can I get this left aligned like in Chrome & FF?

#2

Hi There,

Try also adding this CSS:

   justify-content: left !important;
}```
See this: https://screencast-o-matic.com/watch/cbj32QlNMp

Hope this helps.
#3

When I make the edit in developer options I get the same result you do, but adding the code in custom.css isn’t working. Here’s a screenshot -

#4

Hi,

Please add the css code in PRO > Launch > Theme Options CSS

If that doesn’t help kindly provide your wordpress admin login in Secure Note.

Thanks

#5

That didn’t do it. Access info below.

#6

Hi there,

I just checked it on IE11 and Edge browser and it’s working, it’s now the same in your screenshot. Please clear your browser caches, or use cleaner (eg. CCleaner) to clean it just to make sure all caches are cleared.

Thanks!

#7

The picture shows the error - the text is supposed to be left aligned, not centered.

#8

Hi there,

It appears the same in my chrome and IE, so I’m not sure what’s the issue from your screenshot until you told me :slight_smile:

But please update your CSS to this to make sure it’s aligned to left.

.hm5 .sub-menu .x-anchor .x-anchor-content{
justify-content: left !important;
align-items: left !important;
text-align: left !important;
}

Thanks!

#9

Okay, got it. The issue was that justify-content: left isn’t a valid property value (https://www.w3schools.com/cssref/css3_pr_justify-content.asp). Using justify-content:inherit fixes the issue.

Here’s the code you need to fix the Pro header subnav text centering issue in IE11:

.hm5 .sub-menu .x-anchor .x-anchor-content {justify-content: inherit !important;}
#10

Hi,

Glad you were able to figure it out. Have a nice day and thanks for sharing the code. :slight_smile: