Navigation changes to two lines when the screen gets smaller

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

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?

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

10 minutes ago, bangank36 said:

kindly provide your current site url so we can check

its www.fromyourmuse.com 

That did it. Thank you.

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

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

That worked! Thank you so much!

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

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?

12 hours ago, tuanphan said:

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

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

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?

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

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

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

Great, that fixed it. Thank you so much @tuanphan!

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 

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