Make a the header button appear on mobile header menu on desktop

Hello I need help in a specific topic.

With a piece of CSS Code I made the mobile menu with the hamburger appear on the desktop version. But I want the header button still to appear on the header of the desktop version now that I have the hamburger menu displayed there. 

the website is: https://fjord-media-lcgf-demo.squarespace.com/ (password: Demo)

Thanks a lot!

@simoal Hi! You can add this code in Website > Pages > Website Tools > Custom CSS

@media screen and (min-width: 1025px) {
.header-display-desktop .header-actions.header-actions--right {
    display: flex !important;
}

.header-display-desktop .header-actions .header-actions-action.header-actions-action--social {
    display: none;
}    
}

After displaying the button on the desktop version, you can add the following custom code to properly align the elements in the header.

@media screen and (min-width: 1025px) {
.header-title-logo::after {
    display: none;
}

#header .header-display-desktop {
    justify-content: space-between !important;
    flex-wrap: wrap;
    align-content: center;
}

#header .header-title-nav-wrapper {
    flex: unset !important;
}

#header .header-layout-branding-center .header-actions {
    width: unset !important;
}

#header .header-actions--right .header-actions-action {
    margin-left: 0 !important;
}
}

Hope that helps.

On 7/16/2024 at 7:34 PM, Lesum said:

@simoal Hi! You can add this code in Website > Pages > Website Tools > Custom CSS

@media screen and (min-width: 1025px) {
.header-display-desktop .header-actions.header-actions--right {
    display: flex !important;
}

.header-display-desktop .header-actions .header-actions-action.header-actions-action--social {
    display: none;
}    
}

After displaying the button on the desktop version, you can add the following custom code to properly align the elements in the header.

@media screen and (min-width: 1025px) {
.header-title-logo::after {
    display: none;
}

#header .header-display-desktop {
    justify-content: space-between !important;
    flex-wrap: wrap;
    align-content: center;
}

#header .header-title-nav-wrapper {
    flex: unset !important;
}

#header .header-layout-branding-center .header-actions {
    width: unset !important;
}

#header .header-actions--right .header-actions-action {
    margin-left: 0 !important;
}
}

Hope that helps.

Thank you it helped me a lot. But now the Site logo is not in the middle of the header anymore. It is a little bit too far left. Is there any fast code I can use to make it stay in the middle?

great thank you!