I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
Related
I want to make the navbar centered like the 'my content'
please help me to get deal with this. I wanna make the navbar in the center. like the 'my content' used to. But in fact, it literally not center.
Plus correct my design. Like at padding, margin, border, etc
body {
margin: 0;
padding: 0;
}
.logo {
width: auto;
height: 100px;
}
.container {
width: 720px;
height: auto;
margin: auto;
}
.navbar ul {
padding: 0;
text-align: center;
}
.navbar ul li {
padding: 20px;
display: inline-block;
width: auto;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
padding: 10px 20px;
width: auto;
border: 1px solid black;
border-radius: 25px;
}
.navbar ul li a:hover {
border: 1px dashed #2a19c0;
border-radius: 25px;
background-color: rgb(68, 99, 236);
color: white;
}
.content {
height: 700px;
background-color: #9360b6;
}
.content h4 {
text-align: center;
width: auto;
padding: 12px;
text-transform: uppercase;
text-decoration: underline;
}
.footer {
background-color: #9360b6;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Latihan Layout intermediate</title>
<link rel="stylesheet" href = "Coffee.css">
</head>
<body>
<div class="container">
<img src="../image/logo.png" class="logo" alt="logo">
<div class="navbar">
<ul>
<li><a>home</a></li>
<li><a>price list</a></li>
<li><a>about us</a></li>
</ul>
</div>
<div class="content">
<h4>My content</h4>
</div>
<div class="footer">
<p>Copyright 2020 Alan's web</p>
</div>
</div>
</body>
You Can wrap your logo with a container then center your logo using the display: flex; & justify-content: center;
HTML:
<div class="logo-container">
<img src="../image/logo.png" class="logo" alt="logo">
</div>
CSS:
.logo-container{
display: flex;
justify-content: center;
}
I have this html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>Sell<img src="money.png"></li>
<li>Buy<span><img src="tickets.png"></li>
<li>Sign in<span><img src="locked.png"></li>
</ul>
</div>
</div>
</header>
</body>
</html>
And this css below:
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
In the navigation list on the top right (ul) I want to center those images with the li text in my css. I tried putting text-align: center; on the .heading-list li img but it is not centering the image. Is there something else I have to do?
You can use flexbox, as I used in this example
body {
font-family: "Helvetica Neue",Helvetica,Roboto,Arial,"Lucida Grande",sans-serif;
margin: 0;
padding: 0;
font-size: 14px;
background-color: #F6F8F9;
}
.header-container {
background-color: #260354;
width: 100%;
position: relative;
}
.navigation {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.navigation-content {
padding: 15px 30px;
border-bottom: none;
}
.heading {
color: white;
margin: 0;
padding: 0;
display: inline-block;
}
.heading-list {
float: right;
list-style: none;
overflow: hidden;
}
.heading-list li {
color: white;
float: left;
padding-right: 30px;
display: flex;
align-items: center;
}
.heading-list li img {
color: white;
width: 24px;
height: 24px;
margin-left: 10px;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="event.css">
</head>
<body>
<header class="header-container">
<div class="navigation">
<div class="navigation-content">
<h1 class="heading">
Test
</h1>
<ul class="heading-list">
<li>
<span>Sell</span>
<img src="https://pbs.twimg.com/profile_images/3038657495/3d2f325c92060a35e7ac8c697c57d8d4.jpeg">
</li>
<li>
<span>Buy</span>
<img src="https://pbs.twimg.com/profile_images/630664501776527361/nIK2xTUE.jpg">
</li>
<li>
<span>Sign in</span>
<img src="http://www.dailyworldfacts.com/wp-content/uploads/2011/06/facts-about-cat-fallen-cat.jpg">
</li>
</ul>
</div>
</div>
</header>
</body>
</html>
So an image by default has a display type of inline-block. To enable it to be centered, include the following in your images css.
display: block;
margin-left: auto;
margin-right: auto
I have page where I want to put navigation bar Menu on the left side of the page. I'm struggling to align text in a tag to the left side. I tried text align to all three elements a,ul and li but that still didn't fix the problem. Also I have the problem with my horizontal navigation bar. I would like to be aligned with h3 tag in my contentMain div. I'm not sure why my two div's are not next to each other as well. if someone can see where my code is off please let me know. Thanks.
div.container {
width: 100%;
height: 100%;
}
.navMenuLeft {
width: 180px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.contentMain h3 {
margin-left: 10px;
margin-right: 10px;
background-color: #000099;
color: white;
text-align: left;
padding-left: 5px;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
text-align: left;
background-color: #d3d3d3;
}
.hfNavLeft li {
text-align: left;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
margin-left: 5px;
padding-bottom: 10px;
padding-left: 5px;
position: relative;
vertical-align: top;
float: left;
display: block;
background-color: white;
min-width: 800px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li>Reports</li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
Demographic
Adult
</nav>
</div>
</div>
</body>
</html>
It's hard to tell what you want... but I can explain the 'reports' alignment. It's in a ul tag - which has default padding and margins. text-align: left; is the default across the board for all elements already.
https://jsfiddle.net/sheriffderek/tLbbzqws/
<aside class='sidebar'>
<h2>Menu</h2>
<nav class='y-navigation'>
<ul class='item-list'>
<li class='item'>
<a href='#'>Reports</a>
</li>
</ul>
</nav>
</aside>
<section class='main-content'>
<h1>Content</h1>
<nav class='x-navigation'>
<ul class='item-list'>
<li class='item'>
<a class='link' href="#">Demographic</a>
</li>
<li class='item'>
<a class='link' href='#'>Adult</a>
</li>
</ul>
</nav>
</section>
...
ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar {
width: 100%;
max-width: 30%;
float: left;
background: lightgreen;
}
.main-content {
width: 100%;
max-width: 70%;
float: left;
background: lightblue;
}
I made several changes on your code. Is this what you want to achieve? .navMenuLeft and .contentMain next to each other?
body {
margin: 0;
}
div.container {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
}
.navMenuLeft {
width: 180px;
}
.navMenuLeft h3 {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0;
background-color: #000099;
color: white;
padding-left: 5px;
}
.contentMain h3 {
background-color: #000099;
color: white;
margin: 0;
}
.hfNavLeft {
margin-left: 10px;
margin-right: 10px;
}
.hfNavLeft ul {
list-style: none;
background-color: #d3d3d3;
}
.hfNavLeft ul li {
margin: 0;
padding: 0;
}
.hfNavLeft a {
color: black;
text-decoration: none;
cursor: pointer;
}
.hfNavLeft a:hover {
color: #999999;
}
.contentMain {
flex-grow: 1;
padding: 0 1rem;
}
.contentMain .hfNavTop {
margin-top: 12px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div class="container">
<div class="navMenuLeft">
<h3>Menu</h3>
<nav class="hfNavLeft">
<ul>
<li>Reports</li>
</ul>
</nav>
</div>
<div class="contentMain">
<h3>Home</h3>
<nav class="hfNavTop">
Demographic
Adult
</nav>
</div>
</div>
</body>
</html>
I'm not sure your require.
If you what align elements on the left side to left.
just add
ul{
padding: 0;
}
I am trying to apply a sticky footer but at the 769px media query it is breaking (won't stay at the bottom of the page). I am using Mobile-First Approach, I am not using Boostrap framework.
Do I need to apply other media queries before the footer will stick? I am trying to add the footer to the bottom of my page.
Am I missing something my CSS media query for 769px or am I missing something in my .main-footer in my CSS Layout Container section under my Base Layout Styles.
I have included my code. Thank you for help!
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px)
}
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>
Move min-height of .wrap class out of media query.
You need the minimum width both, when viewing the page on small and large screens.
Like that:
...
.wrap {
min-height: calc(100vh - 89px)
}
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;
}
...
Note that vh works only in very modern browsers (IE >= 11, Firefox >= 50) See this link for compatibility details: http://caniuse.com/#feat=viewport-units.
There are other ways to make an element stick to the bottom, without using calc and vh. This article describes several ways to do that: https://css-tricks.com/couple-takes-sticky-footer/
One of them (called "Negative margin on footer" in the article above) is to add a negative margin to the footer (equal to the height of the footer) and bottom padding to the element that wraps content above the footer (again equal to the height of the footer):
Quote from https://css-tricks.com/couple-takes-sticky-footer/: There is negative top margins on footers
This technique did not require a push element, but instead, required
an extra wrapping element around the content (the wrapping element that held everything except the footer) in which to apply
matching bottom padding to. Again to prevent negative margin from
lifting the footer above any content.
What needs to be changed in your CSS to use this technique:
...
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
...
Here is the whole code (HTML is same as yours):
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>
I'm new to HTML and CSS and am trying to make a menu bar. I placed a navigation bar inside a div assuming that it would kind of be in the center. Instead, it appears to sit on the bottom. Also, how could I position the navigation bar so it's not just floating to the left or the right.
Side question, how can I have it so the menu bar completely extends to the edge of the screen. Like the one at the top of this site.
Here's the code:
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Is this what you want?
I have added margin:0; to the ul.
body {
font-family: "Open Sans", sans-serif;
}
#nav {
background-color: white;
height: 300px;
width: auto;
height: 55px;
box-shadow: 1px 3px 2px #888888;
}
h1 {
color: #35e3c1;
display: inline;
font-size: 36px;
font-weight: 900;
margin-left: 15px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: inline-block;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: #1fe0ba;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soycial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h1>Soycial</h1>
<ul>
<li>Home
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</body>
</html>
Other ways this could have been done would have by messing with top and bottom margins(depending on what specific ratios you want). Using this way will get you specifically what alignment you want vertically.