Jump to content

Recommended Posts

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

Link to comment

Hi Sibylle, can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

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;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

I would also prefer to show the navigation "MENU" (on mobile) on the right side, same as on the desktop version. Thank you.

Thanks for your help.
Sibylle

Edited by hello_studiofrey
Link to comment
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;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
}

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

IMG_9688.PNG

IMG_9689.PNG

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.