How to fix my bootstrap navbar for mobile

1

Codepen: https://codepen.io/colesam/pen/ryQEdP?editors=1100

navbar code:

      <nav class="navbar navbar-custom navbar-static-top" id = "nav">
        <div class="row">
          <div class="col-xs-12">
            <!-- Logo -->
            <div class="navbar-header">
              <a href="#" class="navbar-brand">Samuel Cole</a>
            </div>
            <!-- Menu -->
            <div class="navbar-right">
              <ul class="nav navbar-nav">
                <li><a href="#"><span>Home</span></a></li>
                <li class="active"><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>

CSS:

@import url('https://fonts.googleapis.com/css?family=Poppins');

.large-card-shadow 
{
	box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.6), 0 16px 32px 0 rgba(0, 0, 0, 0.6);
}

.active > a
{
  background-color: #1e1e1e !important;
  font-family: Poppins, Monospace;
}

.navbar-brand
{
  color: #bdbdbd; /*Nearly White*/
  font-family: Poppins, Monospace;
  font-size: 22px;
}

.navbar-custom
{
  border: none;
  background-color: #262626; /*Lighter Gray*/
}

body 
{
  background-color: #bdbdbd; /*Nearly White*/
  border-color: black;
  margin-top: 0px;
}

li > a
{
  color: #bdbdbd; /*Nearly White*/
}

ul
{
  padding-right: 15px;
}

#jumbotron
{
  background-color: 	#1e1e1e;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px;
  height: 100vh;
  border-radius: 0px;
  
  padding: 0px;
}

When I reduce the width of the screen in my codepen to roughly a smartphone’s size, the navbar at the top gets really messed up.

I believe that my navbar has enough room to remain the way it is even on mobile, without needing to use a collapseable menu. I tried making the padding of navbar-brand 0px but that did not do the trick.

Any ideas or tips?

2

After viewing my pen on my mobile phone, I’ve determined that the design looks god awful on mobile anyway. Is there a way to have a different design for mobile devices?

3

Check out the documentation here: http://getbootstrap.com/css/#responsive-utilities. Depending on how you want to code it all up, you may be looking for this functionality. It will allow you to hide/reveal elements depending on the breakpoints that you specify. You can then design a separate layout for mobile. Good luck!