Help with header formatting

Hey!

Thanks for the help.

I edited what you sent me slightly, and the header is pretty much where I want it. (Most importantly, I changed the min-width:768 to max-width-768....hope that wasn't technically wrong to do)

I have one last question - how can I change the breakpoint threshold for the header from normal to the mobile header. Ideally the breakpoint will just be at 768, but currently it is around 1070. In fact, my site collapses from 2 columns to 1 column around this mark too (and preferably the breakpoint for that would be at a smaller width such as 850 as well).

Thanks again

And....! One more thing, when I view my site on Internet Explorer (not Edge), the primary navigation menu is totally skewed in both the normal desktop view and also in the mobile view (the menu button can't even be seen in the mobile view). Is there a fix to this?

To change the mobile break point, you can find the setting at Customizer > Layout > Primary Navigation.
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

As for the IE issue, can you try replacing this CSS:

.site-logo {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.inside-header.grid-container {
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.nav-float-right #site-navigation {
    margin-left: unset;
}

.header-widget {
    order: -1;
    position: absolute;
    right: 0;
    margin-left:20px;
}

.header-widget ul#menu-social-icons {
    display: flex;
}

nav#site-navigation {
    margin-top: 0px;
}

With this:

.site-logo {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.inside-header.grid-container {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
}

.nav-float-right #site-navigation {
    margin-left: unset;
}

.header-widget {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    position: absolute;
    right: 0;
    margin-left:20px;
}

.header-widget ul#menu-social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

nav#site-navigation {
    margin-top: 0px;
}

1) Hmm, changing that css did not seem to have any effects on IE.

2) Also - I changed the mobile breakpoint, but I've noticed an odd behavior - I noticed that the break point was 1068 which is exactly 300 more than the currently set breakpoint of 768. So I changed it to 468, and sure enough it changed the actual mobile breakpoint to 768. I also changed my css to 468/469 respectively, but there is an odd behavior from the actual 768 - 1068. I left it as is for the time being so you guys could see what is going on.

I'm not sure what is causing this odd "300px difference" window, but I do have a css that fixes my sidebar to 300px...but I tried removing it and it didn't make a difference (it's set this way because I need the side bar to stay fixed at 300px for as long as there is a sidebar in view) AND even with the aforementioned change in the mobile breakpoint, the sidebar still collapses at 1068.

1) What version of IE are you using? If you need consistent IE support then I'd recommend going with the Float instead of Flexbox version.

IE is really not a good browser.

Ok Leo - fair point. I don't actually use IE, I use chrome, but sometimes certain visitors still use IE. But fair point, forget #1.

What about #2?

Any chance you can open a new topic for #2?

This thread is getting quite long and it's hard to keep track.

Thanks!