Getting the header and nav on one line (on smaller screens)


#1

I'm working on the first part of this project; creating the header and navigation. Since the assignment was to add a row with two columns, I did just so, not creating any issues so far:

<div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h1>BestBite</h1>
          </div>
          <div class="col-md-6" id="navigation">
            <ul class="nav nav-pills">
              <li role="presentation" class="active"><a href="#">About</a></li>
              <li role="presentation"><a href="#">Sign Up</a></li>
              <li role="presentation"><a href="#">Log In</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

But! I am trying hard to recreate the example page, which uses only on col-md-4 class for the title (the h1 tag) and none for the navigation. Since I would like to use the columns, I now have trouble to recreate the page.

/* Header */

.header{
  padding-top: 30px;
  padding-bottom: 30px;
}

.header .col-md-6 {
  height: 75px;
  display: flex;
  align-items: center;
}

#navigation {
  justify-content: flex-end;
}

.nav-pills li a {
  color: #d8192f;
  margin: 0;
}

.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
  background-color:rgba(216,25,47,1);
  box-shadow:0 2px 4px rgba(0,0,0,.5); 
  color:#fff;
}

I'm using the flexbox alignments inside the columns, to get the content aligned where I want it (Based on this explanation) and it all looks fine when the screen is wide enough. On smaller screens, the second column is placed underneath the first column (as expected in Bootstrap), but how can I make sure the columns stay next to each other up until the point that only the content does not allow this anymore? I've added borders to explain the issue a bit more in this screenshots:


#2

Update

I figured it out on my own by using Bootstrap extra small and small columns. :slight_smile: Although it's not perfect yet, I've come quite close for this assignment. I'm still using the flexbox align-items for vertical alignment and justify-content for horizontal alignment` (and centering the content in their respective boxes).

The solution is based on the Bootstrap information found here. For anybody interested:

<div class="header">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-4">
            <h1>BestBite</h1>
          </div>
          
          <div class="col-xs-12 col-md-8">
            <ul class="nav nav-pills">
              <li role="presentation" class="active"><a href="#">About</a></li>
              <li role="presentation"><a href="#">Sign Up</a></li>
              <li role="presentation"><a href="#">Log In</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

/* Header */

.header{
  padding-top: 30px;
  padding-bottom: 30px;
}

.header .col-xs-12, .header .col-xs-8, .header .col-sm-6, .header .col-md-8, .header .col-md-4 {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-pills li a {
  color: #d8192f;
  margin: 0;
}

.nav-pills li.active a,
.nav-pills li a:hover,
.section .btn:hover {
  background-color:rgba(216,25,47,1);
  box-shadow:0 2px 4px rgba(0,0,0,.5); 
  color:#fff;
}


#3

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.