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

20 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 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, 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 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, 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 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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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, 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 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, 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 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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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