IE Header logo issue

Sparkling
1

Hello,

I am having an issue with internet explore where my Header image/logo is running off the page and not resizing or being 100% responsive it just seems to be not working… It does work on Chrome Firefox Safari.

[Album] imgur.com

Thanks I have attached a screenshot! was wandering if anyone had any custom CSS I could add to fix this issue!

2

Hi @johnnyboy5566,

I hope you are well today and thanks for posting here.

You can try resolving that issue by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

div#logo, div#logo * {
    max-width: 100% !Important;
}

Best Regards,
Movin

3

Thanks Movin for the idea, sadly it did not work…

On my website on internet explore it loads the whole logo and the website… but the logo doesnt just responsively stay up the menu it runs of the page unlike the other browsers… but I can still see the whole logo by dragging the bar on the bottom to the right to see the rest of it! :stuck_out_tongue: Any other options?

4

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

5

TO recreate the issue make sure you are on internet explore not microsoft edge! Thank you

thanks again for helping

6

I could confirm the issue on your site.

To resolve the issue try using the below CSS code instead of above shared.

div#logo, div#logo * {
    max-width: 1140px;
}
7

I gave that CSS a try and it seemed to not change anything even for testing tried it at a lot smaller max-width: and it did not alter anything.

8

I visited your site but didn’t find the provided CSS code in your site markup.

Where have you added it?

9

I actually fixed the problem I was having because I switched logos, and that took away the issue… The issue I am having now is that the primary menu when dragging the window smaller as if resizing the window is dropping the primary menu below the header image logo is there anyway to make it switch to the mobile dropdownbox before that happens? so that it is always on one line.

10

Awesome great to see you got that fixed.

Do not resize the window manually that way instead check whether this issue occurs on standard mobile sizes by using https://www.responsinator.com/

11

The problem is occuring with smallers windows. What is happening is that the navigation menu (the whole menu) is moving down under the logo when it gets to smaller resolutions or sizing? Is there anyway to make it switch to the mobile menu when it does that and or force it to stay up with the logo.

12

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS



@media (min-width: 768px){
  #page .navbar-collapse.collapse {
    display: none!important;
  }
#page .navbar-collapse.collapse.in {
    display: block!important;
        height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
#page .navbar-toggle {
    display: block;
}
#page  .navbar-nav {
    float: right;
    margin: 7.5px -15px;
}
#page .navbar-header {
    float: none;
}
 #page .navbar-nav>li {
    float: none;
}
}

@media (min-width: 992px){
 #page .navbar-nav>li {
    float: left;
}
  #page .navbar-collapse.collapse {
    display: block!important;
  }

#page .navbar-toggle {
    display: none;
}

#page .navbar-nav {
    float: right;
    margin: 0;
}
#page .navbar-header {
    float: left;
}
}

@media (max-width: 992px){
#page .nav.navbar-nav {
    float: none;
}
.navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
}
13

Thank you so much Movin! you have been fantastic! I was having issues with this stuff and that last fix! did exactly what I wanted thank you!

14

You are always welcome here :slight_smile: