1

I want to make a fixed navbar at the bottom of the viewport with two sections. On the left, links for the rest of the site, and on the right, links to outside sources. I want to have everything both horizontally and vertically centered and to be responsive. For every solution I've tried, the height, alignment or size of the navbar is slightly off.

If I set the content div to 90% and the navbar div to 10%, then it "works" and things are aligned correctly, but I want the navbar to be slightly thinner.

As you can see with the border I styled the nav div with, its basically floating, and I have no idea why.

I've seen some similar questions, but a lot of the answers seem to point to outdated solutions using floats, etc.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}
.page {
  height: 100%;
}
.main-content {
  height: 90%;
  max-width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-left {
  text-align: center;
  padding: 20px;
}
.nav {
  border: 1px solid blue;
  height: 5%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-left {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 10vh;
}
.nav-right {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 10vh;
}
.nav ul {
  padding: 0;
  margin: 0;
  display: inline-block;
}
.nav li {
  display: inline-block;
  text-align: center;
}
.nav a {
  color: black;
}
.nav a:link {
  text-decoration: none;
}
.nav a:visited {
  text-decoration: none;
}
.nav a:hover {
  text-decoration: none;
  color: gray;
}
.nav a:active {
  text-decoration: none;
}
img {
  border-radius: 50%;
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/383177a704.js"></script>
  <title>Alex Wilson - Man, Web Designer, Legend</title>
</head>

<body>

  <div class="page">

    <div class="main-content">

      <div class="main-left">
        <img src="http://i.imgur.com/IMIKhWA.jpg"></img>
      </div>
      <div class="main-right">
        <h1>About me</h1>
        <p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
          be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
      </div>
    </div>

    <div class="nav">

      <div class="nav-left">
        <ul>
          <li><a href="Home.html">Home</a>
          </li>
          <li><a href="About.html">About</a>
          </li>
          <li><a href="work.html">Work</a>
          </li>
        </ul>
      </div>

      <div class="nav-right">
        <ul class="list-right">
          <li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </li>
          <li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a>
          </li>
          <li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>

    </div>

  </div>

</body>

Here's a CodePen.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Baron Alex Von Wilson
  • 27
  • 3

1 Answers1

0

So I did a few things to your code:

  1. Made your page element a flexbox too:

    .page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

  2. And removed the heights for the main-content and nav, and the max-width for the main-content(better to set it in pixels according to content rather than percentages I guess).

  3. For making the navbar slightly thinner perhaps you can reduce the line-height for the nav-left or nav-right.

  4. Also added flex: 0 0 auto so that the the nav doesn't shrink too much when the height of the viewport is small (because line-height of nav is in viewport pixels).

See demo below:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  /*height: 90%;*/
  /*max-width: 70%;*/
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-left {
  text-align: center;
  padding: 20px;
}

.nav {
  border: 1px solid blue;
  /*height: 10%;*/
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto; /* addded */
}

.nav-left {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 5vh;
}

.nav-right {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  font-size: 3vh;
  line-height: 5vh;
}

.nav ul {
  padding: 0;
  margin: 0;
  display: inline-block;
}

.nav li {
  display: inline-block;
  text-align: center;
}

.nav a {
  color: black;
}

.nav a:link {
  text-decoration: none;
}

.nav a:visited {
  text-decoration: none;
}

.nav a:hover {
  text-decoration: none;
  color: gray;
}

.nav a:active {
  text-decoration: none;
}

img {
  border-radius: 50%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>

<div class="page">
  <div class="main-content">
    <div class="main-left">
      <img src="http://i.imgur.com/IMIKhWA.jpg"></img>
    </div>
    <div class="main-right">
      <h1>About me</h1>
      <p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
        be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
    </div>
  </div>

  <div class="nav">

    <div class="nav-left">
      <ul>
        <li><a href="Home.html">Home</a>
        </li>
        <li><a href="About.html">About</a>
        </li>
        <li><a href="work.html">Work</a>
        </li>
      </ul>
    </div>

    <div class="nav-right">
      <ul class="list-right">
        <li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        </li>
        <li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a>
        </li>
        <li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        </li>
        <li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </li>
        <li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        </li>
      </ul>
    </div>
  </div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 1
    Hey man thanks for your response! I was able to set the page to column and fix the line height so everything fits correctly! Thanks for sending me down this path of thought. I totally didn't think the flex-direction would matter! – Baron Alex Von Wilson Sep 12 '16 at 19:36