# How to keep button in Navbar on same line when window size is reduced?

**URL:** <https://forum.bootstrapstudio.io/t/how-to-keep-button-in-navbar-on-same-line-when-window-size-is-reduced/8063>\
**Category:** Webdesign Help\
**Created:** [November 12, 2021, 10:34am UTC](https://forum.bootstrapstudio.io/t/how-to-keep-button-in-navbar-on-same-line-when-window-size-is-reduced/8063 "2021-11-12T10:34:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SAZ](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/s/ecb155/32.png) [@SAZ](https://forum.bootstrapstudio.io/u/SAZ)\
**Post date:** [November 12, 2021, 10:34am UTC](https://forum.bootstrapstudio.io/t/how-to-keep-button-in-navbar-on-same-line-when-window-size-is-reduced/8063/1 "2021-11-12T10:34:05Z")

</div>

Dears, I have a navbar containing a brand box and a menu (hamburger) button when the window width becomes smaller. When decreasing the window width, the brand box and the button box at some point collide, and the button is thrown to a second line. I would like instead that the button overlaps the brand box. I have joined in attachment some screenshots that illustrate my issue.

 ![NAVBAR ISSUE](https://forum.bootstrapstudio.io/uploads/default/original/2X/1/16a291297c21496acefa2b069388549abfdf7021.gif)  
I have tried to use “ms-auto” class beside navbar-toggler, which just positionned the button on the right when thrown to the second line, but there is still a second line. I tried also to keep the height of the whole surrounding box constant, and increase the Z-index of the button, but that was not successful either.  
Of course, I googled, and of course, did not find anything relevant, hence my post here.  
Thanks a lot in advance for support.  
Bye,

---

<div class="post-metadata">

**Author:** ![floydmanfloyd](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/floydmanfloyd/32/926_2.png) [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)\
**Post date:** [November 12, 2021, 11:13am UTC](https://forum.bootstrapstudio.io/t/how-to-keep-button-in-navbar-on-same-line-when-window-size-is-reduced/8063/2 "2021-11-12T11:13:36Z")

</div>

Try resetting the flex options and see if that helps

---

<div class="post-metadata">

**Author:** ![floydmanfloyd](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/floydmanfloyd/32/926_2.png) [@floydmanfloyd](https://forum.bootstrapstudio.io/u/floydmanfloyd)\
**Post date:** [November 12, 2021, 11:24am UTC](https://forum.bootstrapstudio.io/t/how-to-keep-button-in-navbar-on-same-line-when-window-size-is-reduced/8063/3 "2021-11-12T11:24:55Z")

</div>

Checked what the flex settings are for a nav container-fluid

![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/2/2f39baac0cadb19871019b005d9a342ad60b1dfd.png)

---

<div class="post-metadata">

**Author:** ![SAZ](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/s/ecb155/32.png) [@SAZ](https://forum.bootstrapstudio.io/u/SAZ)\
**Post date:** [November 12, 2021, 12:12pm UTC](https://forum.bootstrapstudio.io/t/how-to-keep-button-in-navbar-on-same-line-when-window-size-is-reduced/8063/4 "2021-11-12T12:12:02Z")

</div>

Dear floydmanfloyd, thanks for the hint.  
Indeed, I have implemented these moditfications:

1. To the class “container-fluid” (the whole navbar container), I have appended “flex-nowrap”
2. To the “navbar-brand” class (the brand box), I have added the style “overflow: hidden !important;”
3. To the “navbar-toggler” class (the button), I have added the style “overflow: visible !important;”  
And the **result was as expected** : the button overlaps the brand box when the window width reduces. Perfect.  
Thanks again, and have a good day.  
–SAZ