Why does my navbar appear to be floating?
Question
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 .
1 answers
solution1
0 ACCPTED 2016-09-12 04:16:31
So I did a few things to your code:
Made your
pageelement a flexbox too:.page { height: 100%; display: flex; flex-direction: column; }And removed the heights for the
main-contentandnav, and themax-widthfor themain-content(better to set it in pixels according to content rather than percentages I guess).For making the navbar slightly thinner perhaps you can reduce the
line-heightfor thenav-leftornav-right.Also added
flex: 0 0 autoso that the thenavdoesn't shrink too much when the height of the viewport is small (becauseline-heightofnavis 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.