CODEWITHSUNDEEP
bootstrap-4twitter-bootstrap-4
matt
matt

Reputation: 177

How do I make the navbar full width on narrow viewports?

On mobile browsers the navbar becomes centered. I want it to be spaced out like it is at larger viewports. So the logo would be on the left, and the menu icon would be on the right. How do I do this? Is there a built-in class?

enter image description here

Upvotes: 0

Views: 1240

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362790

Using navbar-toggler-right the menu icon remains on the right so you'll need to share the code you're using..

http://www.codeply.com/go/e3G0GCF5zW

Upvotes: 1

crazymatt
crazymatt

Reputation: 3286

Looking through the DOM on the twitter bootstrap website in mobile view I added width:100% to the navigation bar container class. Looks like this:

@media (max-width: 991px){
   .navbar-toggleable-md>.container {
      padding-right: 0;
      padding-left: 0;
      width: 100%; //ADD ME
   }
}

This made the Bootstrap text appear on the left and the mobile navigation button on the right side. I did not test this extensively so you may want to do that. Also one thing to remember is that version 4 is still in alpha phase so things may subject to change.

Upvotes: 1

phpenthusiast
phpenthusiast

Reputation: 101

You just need to add some CSS code that overrides the positioning of the logo and the navigation container in the mobile render.

@media only screen and (max-width:640px) {
#logo {float:left;position:relative;max-width:49%;}
#navigation_container {float:right;position:relative;max-width:49%;}
}

You'll need to work out the correct CSS identifiers for the markup in your specific situation so this CSS code will work, as well as whatever breakpoint width value makes sense for your situation. Last tip: having the overflow:hidden in the css for the container of both of these will prevent collapse of that container so content following this header area won't crowd the header space.

Upvotes: 0

Related Questions