Always Desktop Menu

Site URL: https://dalmatian-maroon-ws68.squarespace.com/

Friends! I'm at a loss. Google and web inspector have failed me so I'm turning to you. How do you force a site to never show the mobile/hamburger menu and to always show the desktop menu? I have one button in the right of the desktop menu, and since we don't have more menu items, the client wants that button always visible instead of behind a hamburger. Any thoughts? Thanks in advance for any help you can provide!

 Password: grosvenor

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* show icons */
.header-actions.header-actions--right, .header-actions-action.header-actions-action--cta {
    display: flex !important;
}
.header-actions.header-actions--right {
    width: 20%;
}
/* remove burger */
.header-burger {
    display: none;
}
}

Tuanphan! Thank you so much. Sincerely appreciate it. This is a great help. Have a great week.

Hi @tuanphan! Any chance you could help me with a similar issue please? I want to do the same thing but I already have a vertical left aligned menu bar. I want it to apply to all screen sizes and stay as a desktop version (i.e. show nav items and hide burger menu) on mobile as well as desktop.

Really grateful if you can help at all!

My site is https://badger-fuchsia-m8za.squarespace.com/ 

Password carriage

On 2/18/2022 at 9:03 PM, ruthob93 said:

Hi @tuanphan! Any chance you could help me with a similar issue please? I want to do the same thing but I already have a vertical left aligned menu bar. I want it to apply to all screen sizes and stay as a desktop version (i.e. show nav items and hide burger menu) on mobile as well as desktop.

Really grateful if you can help at all!

My site is https://badger-fuchsia-m8za.squarespace.com/ 

Password carriage

It looks like you figured it out?

Quote

4 hours ago, tuanphan said:

It looks like you figured it out?

Hi @tuanphan I'm halfway there I think, but when I go to mobile there are 2 problems:

1) The navigation links don't appear on Mobile

2) The bar vertical header bar suddenly becomes wider on mobile, and the logo moves from the top to the centre and goes out of alignment. 

It's very odd. My best guess is that my code for vertical header, and code for always desktop navigation are in some way clashing.

Hi @tuanphan, 

Still having this issue, and I'd be eternally grateful if there's any chance you might be able to help. I have played with dozens of code variants and what I have now if you go to my site seems to be the closest I can get - 

The header bar is narrowed correctly but the title is not within the header, and the navigation items are not displaying. 

For what I am trying to do, you can see the desktop version.

Thanks!

On 2/18/2022 at 9:03 PM, ruthob93 said:

Hi @tuanphan! Any chance you could help me with a similar issue please? I want to do the same thing but I already have a vertical left aligned menu bar. I want it to apply to all screen sizes and stay as a desktop version (i.e. show nav items and hide burger menu) on mobile as well as desktop.

Really grateful if you can help at all!

My site is https://badger-fuchsia-m8za.squarespace.com/ 

Password carriage

The url doesn't exist. Can you check it again?

@tuanphan Sorry I forgot I changed it last week. It's carriage-grand-tour.squarespace.com

Thanks!

On 3/7/2022 at 4:29 PM, ruthob93 said:

@tuanphan Sorry I forgot I changed it last week. It's carriage-grand-tour.squarespace.com

 

Thanks!

Try adding to Design > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.header-title {
    flex: 30% !important;
    max-width: unset !important;
}
}

On 3/10/2022 at 1:15 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.header-title {
    flex: 30% !important;
    max-width: unset !important;
}
}

Thank you so so much @tuanphan! I am so grateful - this issue has been driving me insane. I can't believe it's fixed at last! Thank you thank you!!