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
  • Views 2.1k
  • Created
  • Last Reply
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. 

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.