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

  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://tarantula-quillfish-w6xe.squarespace.com/ The navigation in the header moves to two lines even though there is room on the page when the page gets smaller. How do I increase the pa

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 stac

its www.fromyourmuse.com 

Posted Images

18 answers to this 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, Portfolio hover Replace Link Style
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 post
  • 0

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?

Link to post
  • 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, Portfolio hover Replace Link Style
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 post
  • 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, Portfolio hover Replace Link Style
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 post
  • 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 post
  • 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?

Link to post
  • 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, Portfolio hover Replace Link Style
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 post
  • 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 post
  • 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, Portfolio hover Replace Link Style
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 post
  • 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;
}

 

Link to post
  • 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;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...