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

@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!!!

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?

@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!

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!

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

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

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

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