Hello guys im trying to recreate this:
This is what i have:
I did everything except i cant seem to get the nav potion to the right of the page.Any suggestions what i can do to make it work? What is the best way to do it and why?
index.html :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<div class="logo">
<img src="./resources/images/img-myt-logo.jpg" alt="Our logo">
<span>My Times</span>
</div>
<nav>
<span>World</span>
<span>U.S</span>
<span>Tech</span>
<span>Science</span>
</nav>
</header>
</body>
</html>
style.css :
header {
display: flex;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid black;
}
.logo{
display: flex;
align-items: center;
margin-left: 20px;
}
nav span {
display: inline-block;
padding-right: 40px;
justify-content: flex-end;
}
.logo span {
color: MediumAquamarine;
padding-left: 10px;
}
add justify-content: space-between; to header
header {
display: flex;
font-family: Verdana;
justify-content: space-between;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid black;
}
.logo{
display: flex;
align-items: center;
margin-left: 20px;
}
nav span {
display: inline-block;
padding-right: 40px;
justify-content: flex-end;
}
.logo span {
color: MediumAquamarine;
padding-left: 10px;
}
<header>
<div class="logo">
<img src="./resources/images/img-myt-logo.jpg" alt="Our logo">
<span>My Times</span>
</div>
<nav>
<span>World</span>
<span>U.S</span>
<span>Tech</span>
<span>Science</span>
</nav>
</header>
If I understand what you're asking, you need to justify the content so that it opens up space between your logo div and the nav element. Easiest way to do this is add justify-content to your CSS for the header...
header {
display: flex;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid black;
justify-content:space-between;
}
.logo{
display: flex;
align-items: center;
margin-left: 20px;
}
nav span {
display: inline-block;
padding-right: 40px;
justify-content: flex-end;
}
.logo span {
color: MediumAquamarine;
padding-left: 10px;
}
The justify-content you have on nav span would justify the content within the nav, not justify the nav element itself within the header.
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed last year.
I am new to web development and I am trying to create a responsive navbar but float Property is Not Working. Here is the HTML Code
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
and here is the CSS code
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
I have tried all thing I think of like padding, Increasing logo width, etc. But it make it unresponsive on bigger screen
Solution 1: (Using Float)
Remove display: flex; from nav CSS and add float: left; on .logo CSS.
nav {
background: #000000;
color: white;
line-height: 76px;
}
.logo {
float: left;
}
Solution 2: (Using Flex)
Just add justify-content: space-between; in nav CSS.
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
I hope it'll help you out, Thank You
Add this to your nav style
justify-content: space-between;
add justify-content: space-between to nav styles
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
just add in nav css ( justify-content: space-between;)
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
On my landing page, with a position: sticky nav bar, The navbar will stay at the top of the page but it does not stay completely stationary while scrolling
Codepen: https://codepen.io/jcrainey/pen/rNGLyOQ
I've tried setting a fixed height to .sticky but it just adds space to the bottom of the navbar. Any thoughts on how to make it stay completely stationary?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
.navbar has inherited margins.
Set a margin: 0 on .navbar and give it a height.
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
height: 60px;
}
You should be able to remove the height from .sticky too.
You don't have to adjust the height, or set the top padding. The reason why your navbar was moving is that it will move towards the top until any "explicitly defined" margin, or any "existing margin" is completely gone. You need to only add margin: 0; to your .navbar element in your style-sheet, like in the snippet below.
Just a tip. If you press F12 to open the tools, and find the nav-bar element in the HTML that is rendered in the chrome dev-tools, click on it, and it will show you what youre padding, margin, and border all are set too.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin-top:0;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
One possibility is to add padding-top: 1px; to .sticky. The reason: The included ul (.navbar) has default top and bottom margins, which are not included in the "sticky" part (aka "collapsing margins"). Adding just one pixel of padding-top to the parent prevents that.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
padding-top: 1px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class="navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
There are a few things going on here.
1st, you have position: sticky in 2 places: .sticky and .navbar. I removed it from your .navbar. 2nd, your ul is inheriting browser styles. (It's often useful to use a CSS reset to remove these: https://necolas.github.io/normalize.css/.) I removed the margin from your ul and gave it a 1em padding. 3rd, I removed your negative margin on your first li. Is this what you're looking for?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 1em;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
Im trying to align my a-tags side by side, but for some reason the divs inside the a-tag goes to the next line?
How can I align my three menu lines side by side with the others? display: inline-block; didn't work for me?
What I'm trying to create is something like this image:
But what do I miss to get the menu on the same line?
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4C5BA0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
*/
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
.right-nav {}
.left-nav {}
<?php
declare(strict_types=1);
?>
<!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 href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link rel="stylesheet" href="./css/site.scss">
<script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Web title</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
</body>
</html>
Put this on your .right-nav
Display flex is very useful for this kind of situations.
Property flex-direction isn't neccesary, display flex itself is flex-direction: row; by default.
The gap isn't neccesary too, it just makes a gap between your items.
align-items is to align your items vertically in the center.
.right-nav {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
You forgot to use display: flex; to .right-nav class. And center elements properly align-items: center; justify-content: center;
Now everything works fine:-) Best regards!
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4c5ba0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
*/ .line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
<header>
<div class="topnav">
<div class="left-nav">
<a href="#news">
<p class="logo-style">Web title</p>
</a>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
There are many different ways to go about creating this display, but probably the most straightforward approach in modern CSS is to use CSS Flexbox.
(Or, in this case, two nested Flexboxes.)
The example below has two elements which use:
display: flex;
One is the <header> itself, which means its two immediate children:
<h2 class="logo-style">
<nav>
will be flexibly positioned along its horizontal axis.
The other is the <nav>, which means its two immediate children:
<ul>
<a class="menu">
will in turn also be flexibly positioned along its own horizontal axis.
Note that the <header> has a justify-content value of space-between which means that the first of its two children will be positioned towards the left and the second will be positioned towards the right.
By contrast, the <nav> has a justify-content value of flex-end which means that both of its children will be positioned towards the right.
Working Example:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-style a {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
letter-spacing: 0.05em;
color: #4C5BA0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul li {
display: inline-block;
margin-right: 18px;
padding: 6px;
border-radius: 6px;
}
nav ul li:hover {
background-color: #4C5BA0;
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
.menu {
display: inline-block;
width: 30px;
height: 27px;
background: linear-gradient(brown 0% 20%, white 20% 40%, brown 40% 60%, white 60% 80%, brown 80% 100%);
}
.menu:hover {
height: 27px;
background: linear-gradient(black 0% 20%, white 20% 40%, black 40% 60%, white 60% 80%, black 80% 100%);
}
<header>
<h2 class="logo-style">Web title</h2>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>Coverage</li>
</ul>
</nav>
</header>
Trying to separate the logo flex box from the social flex box to put fb tt Instagram logos, but it won't work.
Also, I'm trying to make the logo bigger without increasing the header size, trying to make all more slim but without success.
Any tips for both problems?
body {
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head {
background-color: #137B77;
margin: 0;
padding: 0;
align-items: center;
display: flex;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
}
.main-header {
display: flex;
align-items: center;
}
.header-menus {}
.header-menus ul li {
list-style: none;
margin-left: 10px;
color: #000000;
}
.header-menus ul li a {
color: #000000;
text-decoration: none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.logo-image {
width: 100%;
}
.social {
width: 100px;
height: 150px;
background-color: blue;
}
.social-menu {
display: flex;
align-items: center;
}
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://via.placeholder.com/50" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<link rel="stylesheet" type="text/css" href="photos/facebook.png">
f
</div>
</header>
</div>
I'm not sure about your logo without seeing the dimensions of the actual image. I have substituted my own image address for the sake of this question. Some of your code is not necessary such as the .center class. most of what you want to accomplish can be achieved by using some justify-content styling and manually adjusting the position of the logo. Also, you are targeting the logo-image div for the size but if you adjust the actual tag then you can change the size without too much issues. If the logo image is square then you will have some issues with sizing but you could use a negative top and bottom margin on the .image-logo class to remove the extra space.
<style>
body {
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head {
background-color: #137B77;
margin: 0;
padding: 0 25px;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
}
.main-header {
display: flex;
position: relative
}
.header-menus {
}
.header-menus ul {
list-style: none;
color: #000000;
display: flex;
justify-content: space-evenly;
padding-left: 0;
}
.header-menus li {
padding-left: 20px;
}
.header-menus li:first-child {
padding: 0;
}
.logo-image img {
max-width: 150px;
position: relative;
right: 75px
}
.header-menus ul li a {
color: #000000;
text-decoration: none;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.social {
background-color: blue;
}
.social-menu {
display: flex;
align-items: center;
}
</style>
<body>
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
</li>
<li>
Contato
</li>
<li>
Portfólio
</li>
<li>
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://www.simpleskincare.com/sk-eu/content/dam/brands/simple/global_use/1620325-new-logo-simple.png.rendition.680.680.png" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<link rel="stylesheet" type="text/css" href="photos/facebook.png">
f
</div>
</header>
</div>
</body>
An image of the resulting render with this code
FontAwesome class fix (the first class is usually not fa. fab is used for brands, fas for solid icons etc)
fa fa-facebook -> fab fa-facebook
added flex: 1 to nav menu & social menu
added flex: 3 to main header
When used with positive numbers, flex can split sections proportionally:
// 20% navigation 60% main 20% social
.head align-items: stretch rather than center (expands to fill height, rather than just staying same and being centered) [could also use align-self on .main-header]
// .main-header align-items: stretch so .logo-image expands
.logo-image - display:flex; in order to center the img
.logo-image{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
Center logo image, width/height: auto (keeps aspect ratio and expands), padding: 1em so there is some space around it
.logo-image img {
padding: 1em;
width: auto;
height: auto;
}
body{
background-color: #45a29e;
margin: 0;
padding: 0;
}
.head{
background-color: #137B77;
margin: 0;
padding:0;
align-items: stretch;
display: flex;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
}
.main-header{
flex: 3;
display: flex;
align-items: stretch;
}
.header-menus{
flex: 1;
}
.header-menus ul li {
list-style: none;
margin-left: 10px;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
.logo-image{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.logo-image img {
padding: 1em;
width: auto;
height: auto;
}
.social{
width: 100px;
height: 150px;
background-color: blue;
}
.social-menu{
flex: 1;
display: flex;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header class="head">
<div class="header-menus">
<ul>
<li>
Home
Contato
Portfólio
Localização
</li>
</ul>
</div>
<div class="main-header">
<div class="logo-image">
<img src="https://picsum.photos/seed/picsum/400/100" alt="Makeup" class="center">
</div>
</div>
<div class="social-menu">
<a class="fab fa-facebook"></a>
<a class="fab fa-instagram"></a>
</div>
</header>
</div>
</body>
</html>
I'm a newbie and I'm making my portfolio for practice, and decided I want to make it fully reponsive and use flexbox as much as possible.
I'm using a "mobile-first" approach, so I can fix any ugliness for desktop later.
My top navigation bar splits my buttons on mobile view. For example, the "About Me" button is in two lines, and the "me" part overlaps with the "about". I want them all to fit in one line, or two split over two lines, but neatly and without overlapping or cutting off text.
Here's my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
}
.nav-container {
display: flex;
}
nav {
display: flex;
font-family: "Lato", sans-serif;
flex-wrap: wrap;
position: fixed;
}
nav ul {
display: flex;
margin: 5px;
padding: 10px;
list-style-type: none;
justify-content: space-around;
width: 100%;
}
nav ul li {
margin: 5px;
padding: 5px;
}
.header-container {
}
header {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: 100px;
}
.headings {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
}
.cv-container {
display: flex;
align-self: flex-end;
margin-left: 30px;
position: relative;
top: 30px;
right: 30px;
color: #000;
border: 1px solid #000;
}
.cv-container a,
.nav-container a {
text-decoration: none;
color: #000;
padding: 5px;
}
.cv-container a:hover,
.nav-container a:hover {
background-color: #f442aa;
}
strong {
font-style: bold;
}
header h1 {
display: flex;
align-self: center;
font-family: "Lato", sans-serif;
padding: 15px;
}
header h2 {
display: flex;
align-self: center;
font-family: "Playfair Display", serif;
padding: 15px;
}
header a {
font-family: "Lato", sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>My Name - Web Designer & Developer</title>
<link rel="stylesheet" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Playfair+Display:400,400i,700,700i" rel="stylesheet">
</head>
<body>
<div class="nav-container">
<nav>
<ul>
<li>About Me</li>
<li>Portfolio</li>
<li>Links</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<header>
<div class="headings">
<p><h1>Virginia Balseiro</h1></p>
<p><h2>Web Designer & Developer</h2></p>
</div>
<div class="cv-container">
<strong>DOWNLOAD CV</strong>
</div>
<div class="social-container">
<a></a>
<a></a>
<a></a>
</div>
</header>
I found some "hacks" online, but I really want to do it the proper way and understand what I'm doing. Thank you so much in advance.
I am suggesting you to use flex-wrap: wrap, on your "ul" tag.
Flex wrap allows wrapping items into multiple lines.