My navbar doesn't stay on the same line when viewed in mobile

All navbar elements are on the same line when viewed on desktop, but become stacked when viewed on mobile. Any tips?

If you want a collapsed menu on mobile device your html should look like this

code bellow:

Is it possible to just have the navbar look the exact same on mobile as in desktop?

All on the same line, all text showing, not collapsed, etc

I think it’s depends of the size of the screen, but i don’t think that is a good idea if u want a collapsed one that is the most common solution you can use it

1 Like

If u just want a simple header with menu, i thought that u can use only the grid system of bootstrap u don’t need to use the navigation classes.

do you understand?

I tried putting all the navbar elements within a “div class row” and putting them all in columns, but that didn’t leave them all on the same line.

and tbh I’d rather not just copy a block of code and paste it into my own when I have no clue what’s going on

Why did you put multiple container-fluid classes?

Also, why did you put two div class container-fluid ?

hmm…understand i just used a another div with container class to set the code inside the navigation in one block but u don’t need to do that, if you look at the Twitter bootstrap documentation you’ll see the behavior of navigation classes,, it is the reason of why your menu is collapsing when you see it on mobile devices, i hope that it helps you.

To do what you want u just need to do a simple header, if you want i can show you.

Sure, I’m just not understanding why nesting the navbar within a ‘div class row’ wouldn’t put it all on the same line? I thought Bootstrap was supposed to be responsive?

Bootstrap is reponsive but to use row u need to use columns too i did an example that maybe can help you.