Help with mobile design

Hi there

Unfortunately, the navigation button "MENU" is cut off on mobile view.  It is not fully readable as it is too much on the right and also the language switcher is not visible in mobile view.

Can anyone please help me to solve these two issues?

Thanks and best regards
Sibylle

Hi Sibylle, can you share your website URL?

On 5/2/2024 at 9:14 PM, Ziggy said:

Hi Sibylle, can you share your website URL?

Hi @Ziggy
Sorry, I forgot the link.
Here you go: https://www.maxzuber.ch/
The navigation "MENU" is on mobile view shown differently at homepage and subpages.
On home, it should be on the right side and on the subpages it is cut off on the right.

Thank you very much
Sibylle

It looks like this is happening because of issues cause by your custom code. 

This should help with MENU going off the screen:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
    .header .header-title-nav-wrapper {
        flex: 1 0 calc(100% - 150px) !important;
    }
}

You might want to change this from display: none; to visibility: hidden;

.homepage .header-title-nav-wrapper {
    display: none;
}

1 hour ago, Ziggy said:

It looks like this is happening because of issues cause by your custom code. 

This should help with MENU going off the screen:

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
    .header .header-title-nav-wrapper {
        flex: 1 0 calc(100% - 150px) !important;
    }
}

You might want to change this from display: none; to visibility: hidden;

.homepage .header-title-nav-wrapper {
    display: none;
}

 

Hi @Ziggy
Thank you very much. I added the code, but the multilingual options are still not showing on mobile and on subpages the navigation is hidden.
Should I exchange the new code with an existing one?

Thanks for your help.
Sibylle

1 hour ago, hello_studiofrey said:

Should I exchange the new code with an existing one?

 

I don't know all of the code you have to tell you want to remove, but if you use this, then remove this code first:

.homepage .header-title-nav-wrapper {
    display: none;
}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
    .header .header-title-nav-wrapper {
        flex: 1 0 calc(100% - 150px) !important;
    }
}
.homepage .header-title-nav-wrapper {
    visibility:hidden;
}

Hello @Ziggy thank you but unfortunately the code is not working. I'm sharing you all of the code that we have on the website, could you please check what could be blocking this? We tried many things but unfortunately nothing seemed to solve the problem. 

 

/* Show burger menu */
.header-burger {
    display: flex !important;
    align-items: center;
}

/* Show logo on all pages */
.header-title-nav-wrapper {
    display: block !important;
}

/* Show overlay mobile menu */
.header--menu-open .header-menu {
    opacity: 10;
    visibility: visible;
}

/* Background colour menu */
.site-wrapper .header-menu .header-menu-bg {
    background-color: #9CBEE4 !important;
}

/* MENU */
.burger-inner {
    display: none !important;
}

.burger--active:after {
    content: 'CLOSE   ' !important;
    font-size: 18px;
    color: #fff !important;
    font-family: 'CommutersSans';
    padding-left: 10px !important;
}

.burger:after {
    content: '  MENU';
    font-family: 'CommutersSans';
    font-size: 18px;
    color: #fff !important;
    padding-left: 10px !important;
}

.header-menu-nav-item {
    height: 10vh !important;
}

//*Hiding Language Switch inside Burger Menu*//
nav.header-menu-nav-list .language-picker {
    visibility: hidden;
}

/* Language Switch outside of the Burger Menu */
.header-display-desktop {
    display: absolute !important;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

/* Show logo */
.header-title-nav-wrapper,
.header-burger {
    display: block !important;
}

.header-display-desktop .header-actions.header-actions--right {
    display: block !important;
    padding-top: 35px !important;
}

.header-display-desktop div#multilingual-language-picker-desktop {   
    margin-right: 10px;
    font-family: 'CommutersSans';
    font-size: 16px;
}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
    .header .header-title-nav-wrapper {
        flex: 1 0 calc(100% - 150px) !important;
    }
}
.homepage .header-title-nav-wrapper {
    visibility:hidden;
}

You can use this CSS under

body.homepage .header-display-mobile .header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 100px") !important;
}

body.homepage .header-burger.menu-overlay-has-visible-non-navigation-items.no-actions {
    width: 100px !important;
}

39 minutes ago, tuanphan said:

You can use this CSS under

body.homepage .header-display-mobile .header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 100px") !important;
}

body.homepage .header-burger.menu-overlay-has-visible-non-navigation-items.no-actions {
    width: 100px !important;
}

 

Hi @tuanphan
I tried, but the problem is still there. I will attach you some screenshots.

- MENU is not fully visible on subpages on mobile
- language selection not shown in navigation on mobile

Thank you very much for your help.
Sibylle

That code for homepage only, to apply to all pages, use this new code

body .header-display-mobile .header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 100px") !important;
}

body .header-burger.menu-overlay-has-visible-non-navigation-items.no-actions {
    width: 100px !important;
}

3 hours ago, tuanphan said:

That code for homepage only, to apply to all pages, use this new code

body .header-display-mobile .header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 100px") !important;
}

body .header-burger.menu-overlay-has-visible-non-navigation-items.no-actions {
    width: 100px !important;
}

 

Thank you @tuanphan

This works perfectly. Many thanks.
The only thing still not visible on mobile is the language switcher?! How can I make it visible? On desktop you can see the two languages, on mobile you can't.

Thank you
Sibylle

18 hours ago, hello_studiofrey said:

Thank you @tuanphan

This works perfectly. Many thanks.
The only thing still not visible on mobile is the language switcher?! How can I make it visible? On desktop you can see the two languages, on mobile you can't.

Thank you
Sibylle

Try this CSS code under

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none !important;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
}

10 minutes ago, tuanphan said:

Try this CSS code under

@media screen and (max-width:991px) {
.header-display-desktop {
    display: block !important;
    position: absolute;
    right: 15vw;
    z-index: 99999999;
}

.header-display-desktop .header-title-nav-wrapper, .header-display-desktop .header-burger {
    display: none !important;
}

.header-dislay-desktop .header-actions.header-actions--right {
    display: flex !important;
}

.header-display-desktop .header-actions.header-actions--right, .header-display-desktop div#multilingual-language-picker-desktop {
    display: flex !important;
}
}

 

Hi @tuanphan
Thanks, it's showing now but not correctly.

The best would be if it is added below the navigation when opening the MENU button.
If that is not possible, please help me to align it nicely with correct distance to the MENU button and on the same height.

Thank you!!

On 5/24/2024 at 3:02 PM, hello_studiofrey said:

Hi @tuanphan
Thanks, it's showing now but not correctly.

The best would be if it is added below the navigation when opening the MENU button.
If that is not possible, please help me to align it nicely with correct distance to the MENU button and on the same height.

Thank you!!

What should it look like?

On 5/25/2024 at 11:19 AM, tuanphan said:

What should it look like?

Hi @tuanphan
I have several Squarespace websites, that are connected with Weglot where the language selector is shown in the navigation on mobile. Please find some examples attached. The simplest version like "Elysia Living" is the nicest.

Thank you for your help
Sibylle

To make language appear inside burger overlay menu, under navigation items, just use this code to Custom CSS box

.header-menu-actions.language-picker.language-picker-mobile {
    visibility: visible !important;
}

Thank you @tuanphan, we managed to adjust the code ourselves and now everything works perfectly. 
The only problem is, that in the mobile version, the logo is not clickable, therefore it doesn't lead a visitor to the homepage. This only works on desktop. Could you please help us with that? 

On 5/30/2024 at 7:29 PM, hello_studiofrey said:

Thank you @tuanphan, we managed to adjust the code ourselves and now everything works perfectly. 
The only problem is, that in the mobile version, the logo is not clickable, therefore it doesn't lead a visitor to the homepage. This only works on desktop. Could you please help us with that? 

I don't see logo now. Can you check again?

https://www.maxzuber.ch/

@tuanphan the logo is not visible on the homepage but it's visible on all the other subpages

On 6/10/2024 at 3:09 PM, hello_studiofrey said:

@tuanphan the logo is not visible on the homepage but it's visible on all the other subpages

You can use this to Custom CSS box

div.header-display-mobile .header-title-logo a {
	position: relative;
	z-index: 999999999;
}