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

Webdesign Help
1

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
NAVBAR ISSUE1205×784 87.1 KB

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,

2

Try resetting the flex options and see if that helps

3

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

image

4

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