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

Code Feedback
1

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

2
3

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

code bellow:

4

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

5

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
6

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?

7

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

8

Why did you put multiple container-fluid classes?

9

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

10

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, https://getbootstrap.com/components/#navbar, it is the reason of why your menu is collapsing when you see it on mobile devices, i hope that it helps you.

11

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

12

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?

13

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