Jump to content

Stacking navigation bar problem

Recommended Posts

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

Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment

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. 

Edited by derricksrandomviews
Link to comment

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

 

image.png

Edited by rwp
Link to comment
  • 1 month later...
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;
}
} 

 

image.png

 

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

 

image.png

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

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.