Stacking navigation bar problem

Can anyone help with a problem I've got with the navigation bar stacking in a Brine template. It's absolutely fine on my laptop but when my client logs into my account it's stacked on her laptop and another person has this problem too who's reviewing the site. I didn't put in the URL because the site isn't live yet.

I've used the following code but it hasn't resolved it.

@media screen and (max-width:900px) {
.Header--top {
   display: none;
}
[data-nc-base="mobile-bar"] {
   display: block;
}
}

Can you share link to your site?

Hi 🙂 The site isn't live yet but this is the URL. Does this link work https://carillon-lobster-xd75.squarespace.com/config/pages

This is the link that works but you would need to create a password that allows viewing only. 

You do that in config/settings/site availability  which is the first thing on that panel at the top. 

https://carillon-lobster-xd75.squarespace.com

Hi Derrick - thanks. Okay I've created a password. Is it okay to put the password on here?

55 minutes ago, KateG said:

Hi Derrick - thanks. Okay I've created a password. Is it okay to put the password on here?

You can share pass here or send to message box

Password is Acky123

Thank you 🙂

On 7/8/2020 at 6:07 PM, derricksrandomviews said:

This is the link that works but you would need to create a password that allows viewing only. 

You do that in config/settings/site availability  which is the first thing on that panel at the top. 

https://carillon-lobster-xd75.squarespace.com

Hi Derrick - I created a password Acky123

Any other help you could offer would be much appreciated. Thanks, Kate

Works fine on my desktop, menu bar looks as is should, it is not stacking,  In mobile view there is a hamburger menu which works fine, sub menus come up, and all works as it should. FYI if a laptop screen is reduced to a certain point, the hamburger menu will show up and the nav bar gets clipped. SS sites try to adapt to whatever any screen is set to. 

Is this what you mean?

If so, it seem to happen around 1095px screen width, this should fix:

@media screen and (max-width:1100px) {
.Header{
   display: none !important;
}
[data-nc-base="mobile-bar"] {
   display: block !important;
}
} 

Okay thanks for taking the time to look Derrick 🙂

Yes rwp! That's totally it. Okay I will try that! Thank you. Will let you know. 

On 7/14/2020 at 2:08 PM, rwp said:

Is this what you mean?

If so, it seem to happen around 1095px screen width, this should fix:

@media screen and (max-width:1100px) {
.Header{
   display: none !important;
}
[data-nc-base="mobile-bar"] {
   display: block !important;
}
} 

 

On 7/14/2020 at 2:08 PM, rwp said:

Is this what you mean?

If so, it seem to happen around 1095px screen width, this should fix:

@media screen and (max-width:1100px) {
.Header{
   display: none !important;
}
[data-nc-base="mobile-bar"] {
   display: block !important;
}
} 

 

That totally worked thank you so much! :)))

That totally worked, thank you so much 😃😃