CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4navbar
kalibvb
kalibvb

Reputation: 249

Bootstrap 4 Navbar to open top to bottom on mobiles

I have a navbar working brilliant in both desktop and mobile resolutions. The only issue I have is that once the site shrinks to mobile size the navbar minimise to an icon (that's absolutely fine) and expand left to right instead top to bottom (that's the problem). It looks ugly and I can't find a solution. 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a href="index.html"><img src="images/finfab-logo.jpg" alt="Company logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                  <a class="nav-link text-white" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="about.html">About<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="contact.html">Contact<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="testimonials.html">Testimonials<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="recent.html">Recent Work<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="industrial.html">Industrial<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="domestic.html">Domestic<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="steel.html">Steel<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link text-white" href="extensions.html">Extensions<span class="sr-only">(current)</span></a>
                </li>
              </ul>

            </div>
          </nav>

There is no styling regarding this because I had no ideas. 

.navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #006600;
    border-radius: 10px;
}

.navbar{
  display: flex;
}

.navbar-toggler{
  flex:1;
}

.navbar-collapse{
  flex:3;

}

.navbar-nav{
  border:1px solid;
  border-radius: 10px;
  border-color: #003300;
  background-color: #003300;
}

.nav-item{
  font-size: 25px;
  font-weight: lighter;
}

.nav-link{
  color:#003300;
}

Upvotes: 0

Views: 1237

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

Just remove the custom flex CSS you've added and the Navbar will display top to bottom on mobile. Keep the CSS for the styles, colors, borders, etc..

.navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #006600;
    border-radius: 10px;
}

.navbar-nav{
  border:1px solid;
  border-radius: 10px;
  border-color: #003300;
  background-color: #003300;
}

.nav-item{
  font-size: 25px;
  font-weight: lighter;
}

.nav-link{
  color:#003300;
}

https://www.codeply.com/go/v7I5von1Xx

Upvotes: 1

Related Questions