[Support request] Menu Viewing Issue in IE using Navigator GP Template

[Kyle]

I am having a viewing issue on this site using older versions of IE. Is there a way to resolve it. The logo is at the top of the sidebar like it is supposed to be, but the menu doesn’t begin until halfway down the screen. It starts about where the menu would end without extending any links when viewed correctly.

This problem only appears to be happening on Internet Explorer. I’ve tested it in Safari, Firefox and Chrome and the menu begins where it is supposed to.

Kyle

[Tom]

Hi there,

Which version of IE?

[Kyle]

The viewing problem is occurring in IE 11.

Kyle

[Tom]

Strange, doesn’t seem to be happy to the Navigator site: https://gpsites.co/navigator

Do you have any custom CSS added to the site?

[Kyle]

Here is all of the additional CSS I’ve added beyond what was part of the Navigator template. The only other thing I did was change an overflow from hidden to visible in the menu.

Kyle

.main-navigation ul li a {
font-family: “museo”
}

.main-navigation a {
font-family: “museo”
}

.feature-box {
margin-left:-50px;
}

h1 {
font-family: “museo”;
margin-top:20px;
color:#2474bb;
padding-left:10px;
}

h2 {
font-family: “museo”;
color:#2474bb;
padding-left:10px;
}

h2 a {
font-family: “museo”;
color:#2474bb;
padding-left:10px;
}

h3 {
font-family: “museo”;
color:#2474bb;
padding-left:10px;
}

a {text-decoration:underline;
}

p {
padding-left:10px;
}
body {
font-family: “museo”;
}

.text-area{
padding-right:20px;
padding-left:10px;
}

[Tom]

If you temporarily remove that CSS, does the issue go away?

[Kyle]

No, that did not fix the issue in IE 11.

Kyle

[Tom]

I just tried viewing your site again and got a 500 internal server error.

Let me know when it’s back up 🙂

[Kyle]

I had to refresh my page a few times but it’s back up. I’ve also added my styling back.

Kyle

[Tom]

Just to test.. what happens if you replace:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

With:

.inside-header {
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

In your Navigator CSS? (Customize > Additional CSS)

[Kyle]

That seemed to fix the problem.

Kyle

[Tom]

Awesome 🙂

[Author]

Posts