Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Navigation changes to two lines when the screen gets smaller


michael2019

Question

Recommended Posts

  • 0

I change flex size to 100%, feel free to place it in custom css

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 100%;
}

image.thumb.png.dc6211cc522064c3c7eb23904d6b32e7.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
1 hour ago, hboss22 said:

I'm having the same problem with my navigation stacking when a browser window is smaller. Is there a way to have the scale of the words go smaller to accomodate a smaller browser size so that the stacking does not occur?

kindly provide your current site url so we can check

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
45 minutes ago, hboss22 said:

its www.fromyourmuse.com 

/* Add this to Settings  ->  Design  -> Custom Css */
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
        font-size: 0.5em;
        margin-left: .3vw;
    }
}

image.thumb.png.1bdf2d2d38b6db8ab787d627d32bffa0.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
1 hour ago, bangank36 said:

/* Add this to Settings  ->  Design  -> Custom Css */
@media only screen and (min-width: 960px) and (max-width: 1200px) {
    .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
        font-size: 0.5em;
        margin-left: .3vw;
    }
}

image.thumb.png.1bdf2d2d38b6db8ab787d627d32bffa0.png

That worked! Thank you so much!

Link to comment
  • 0
On 11/13/2020 at 2:38 AM, atanasmalamov said:

Hi guys! I am experiencing the same problem. (https://atanasmalamov.com) i tried the solutions above but did not work for me, any other workaround?

 

Thank you

I think the code worked. Can you take a screenshot/which screen size do you use?

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
  • 0
/* Add this to Settings  ->  Design  -> Custom Css */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  
  .Header-branding img {
    max-width: 220px;
  }
  .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-inner {
    text-align: center;
  }
  [data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="primary-nav"] {
    width: 100vw;
    position: absolute;
    bottom: -5px;
    display: block;
    left: 0;
  }
  [data-nc-base="header"] [data-nc-group="top"] {
    position: relative;
  }
}

 

image.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
4 hours ago, bangank36 said:


/* Add this to Settings  ->  Design  -> Custom Css */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  
  .Header-branding img {
    max-width: 220px;
  }
  .tweak-header-primary-nav-hover-style-fade .Header-nav .Header-nav-inner {
    text-align: center;
  }
  [data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="primary-nav"] {
    width: 100vw;
    position: absolute;
    bottom: -5px;
    display: block;
    left: 0;
  }
  [data-nc-base="header"] [data-nc-group="top"] {
    position: relative;
  }
}

 

 

Thank you! That worked. Do you think there is anyway to keep the navigation in one line with the logo and cart?

 

Edited by atanasmalamov
Link to comment
  • 0
6 minutes ago, atanasmalamov said:

Thank you! That worked. Do you think there is anyway to keep the navigation in one line with the logo and cart?

 

I dont, since you have much items in the nav, so i break it 2 lines on smaller screen

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 3/2/2021 at 8:08 PM, LinneaN said:

Hi, I need help with my website, I am having a similar issue with the menu breaking into two lines: https://www.arcticpeoples.com/ 

Add to Design > Custom CSS

#header .site-title {
    width: 10%;
}
#desktopNav {
    width: 90% !important;
}

 

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
  • 0
On 4/16/2021 at 12:49 AM, Botond said:

Hi. We have the same issue on smaller screens. The menu is breaking down in 2 lines. Can anybody help us out? https://www.arbuckles.ch 

 

Hi. Add to Design > Custom CSS

/* nav same line */
.Header-nav-inner {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

 

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
  • 0

@tuanphan Hello, hope you're having a great day.  I'm working on a site and having similar issues.  I can't get the tablet navbar all on one line like the desktop version.  Or, alternatively, I can't get the tablet version to have the hamburger like the mobile version.  You'll have to go to any page other than landing to see. 

https://www.acqueenb.com/contact

That's one page.  I've tried the tricks above and just changing the breakpoint.  This is Brine 7.0 btw. 

Separate issue, I can't get the header background image I have showing for tablet and desktop to show in mobile unless I change the breakpoint super low to 375px or lower, but then that messes up the mobile nav bar.  Any chance you have an idea for that? 

And then lastly, 3rd issue - I can't get the gallery in the footer with the 7 logos to be smaller and not so big in tablet and mobile view.  You see how long the mobile footer view is?  The logos in the gallery are huge. 

Any help you can offer would be amazing.  Thanks so much!!!

Link to comment
  • 0
On 9/13/2021 at 3:48 PM, mryanhardy said:

@tuanphan Hello, hope you're having a great day.  I'm working on a site and having similar issues.  I can't get the tablet navbar all on one line like the desktop version.  Or, alternatively, I can't get the tablet version to have the hamburger like the mobile version.  You'll have to go to any page other than landing to see. 

https://www.acqueenb.com/contact

That's one page.  I've tried the tricks above and just changing the breakpoint.  This is Brine 7.0 btw. 

Separate issue, I can't get the header background image I have showing for tablet and desktop to show in mobile unless I change the breakpoint super low to 375px or lower, but then that messes up the mobile nav bar.  Any chance you have an idea for that? 

And then lastly, 3rd issue - I can't get the gallery in the footer with the 7 logos to be smaller and not so big in tablet and mobile view.  You see how long the mobile footer view is?  The logos in the gallery are huge. 

Any help you can offer would be amazing.  Thanks so much!!!

It looks like you solved this?

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
  • 0
46 minutes ago, MP_CE said:

@bangank36@tuanpahn: Thank you for already helping so many people out. I am struggling with a similar problem but none of the code was able to fix it. The website is engage-eu.eu and there should be enough room to move everything into one row in the header. I am using the header layout "logo - links centered - button". Thanks a lot in advance!

image.thumb.png.ee5518a88f444af72b8309b78e11742e.png

Try adding to your Home > Design > Custom Css

.header-nav {
  position: absolute;
  width: 60vw !important;
  left: 50%;
  transform: translateX(-50%);
}

.header-actions--right {
  width: 20vw !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 1/22/2022 at 8:30 PM, bluskeyes said:

I have this same problem.  I've tried to copy and paste some of the codes here, but don't really know what I'm doing... any assistance would be greatly appreciated. thanks

What is your site url? We can help easier

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
  • 0

Hello, my website is doing the same thing. On my left screen the navigation is fine, but on the right screen my navigation is stacked.

thetenmg.com

 

I've tried EVERY code linked here. The only one that seemed to force it to move was the one below, however it shifted the logo in the center and broke the navigation so that none of the links were active anymore. Can anyone help me fix the stacking issue?

.header-nav {
  position: absolute;
  width: 60vw !important;
  left: 50%;
  transform: translateX(-50%);
}

.header-actions--right {
  width: 20vw !important;
}
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...