Breakpoint 7.1? Keep Desktop Header and menu on iPad in Portrait

Site URL: https://www.grahammarriott.com/

I'm trying to overcome the lack of ability in SS 7.1 to set the mobile breakpoint. I can't seem to find a way to keep the desktop header, with Site Title on left and Navigation on right. I only want the hamburger on mobile devices, not on iPad in portrait. Header background is transparent...

New to 7.1 here, any and all help is greatly appreciated. Thank you!

12 hours ago, JDF said:

Site URL: https://www.grahammarriott.com/

I'm trying to overcome the lack of ability in SS 7.1 to set the mobile breakpoint. I can't seem to find a way to keep the desktop header, with Site Title on left and Navigation on right. I only want the hamburger on mobile devices, not on iPad in portrait. Header background is transparent...

New to 7.1 here, any and all help is greatly appreciated. Thank you!

Hi. Add to Design > Custom CSS

/* Force Nav menu on Tablet */
@media screen and (max-width:991px) and (min-width:768px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-nav {
    display: flex !important;
    width: 70% !important;
    flex: 1 1 70% !important;
}
.header-title {
    flex: 1 0 60% !important;
}
}

@tuanphan Thanks so much! You're such a great resource! I've tweaked a bit and implemented. If there's anything you ever need let me know.

On 7/25/2021 at 7:35 PM, JDF said:

@tuanphan Thanks so much! You're such a great resource! I've tweaked a bit and implemented. If there's anything you ever need let me know.

Do you need fix these? (Checked July 27)

Site URL – https://www.grahammarriott.com/

1. (Project) You haven’t changed SEO Title so the browser tab name still shows “General 5”

https://www.grahammarriott.com/projects

2. (American west) Similar above.

https://www.grahammarriott.com/american-west

3. (My native land) Similar about.

https://www.grahammarriott.com/my-native-land

4. (Desktop – My native land) Image overlaps text.

https://www.grahammarriott.com/my-native-land

5. (Mobile – Homepage) On desktop, the entire image can be seen. On mobile, the image is partially cropped.

https://www.grahammarriott.com/

6. (Tablet – Homepage) Scroll bar at the bottom of page.

https://www.grahammarriott.com/

7. (Tablet – Header) Menu is cut into 3 lines.

https://www.grahammarriott.com/

8. (Tablet – About) Increase text width and image width?

https://www.grahammarriott.com/about