how do I make my <a> tags in my Navbar take the full available height from it´s parent instead of just the space required by the content?
Currently, the hover effect only triggers when you mouseover the TEXT, because that's all the space that the content is taking. I want the entire available height to be clickable when hovered.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-800: #0d0d0d;
--clr-600: #122459;
--clr-400: #3565f2;
--clr-200: #3d79f2;
--clr-100: #f2f2f2;
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Bebas Neue", cursive;
}
body {
font-family: var(--font-primary);
background: var(--clr-100);
color: var(--clr-800);
padding: 0;
margin: 0;
}
h1 {
font-family: var(--font-secondary);
}
header {
background-color: var(--clr-800);
color: var(--clr-100);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.5rem var(--clr-800);
height: 40vh;
}
header > h1 {
margin: 0 0 0 4rem;
}
nav > ul {
display: flex;
list-style-type: none;
margin: 0 4rem 0 0;
padding: 0;
}
nav > ul > li {
margin-left: 2rem;
}
nav > ul > li > a {
color: var(--clr-100);
text-decoration: none;
}
nav > ul > li > a:hover {
color: var(--clr-800);
background-color: red;
padding: 2rem 0;
}
<!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">
<title>Website</title>
<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=Bebas+Neue&family=Montserrat:wght#300;500;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</html>
This structure should work nicely for you. I recommend getting good at using your browser dev tools. If you inspect your elements you will notice that nav and ul need to have height: 100%; to fill the available header height.
Then, you need to set min-height: 100%; on a and use flex with align-items: center; to center them once again. I adjusted the spacing by adding horizontal padding and margin on the a so it doesn't affect the clicking area.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--clr-800: #0d0d0d;
--clr-600: #122459;
--clr-400: #3565f2;
--clr-200: #3d79f2;
--clr-100: #f2f2f2;
--font-primary: "Montserrat", sans-serif;
--font-secondary: "Bebas Neue", cursive;
}
body {
font-family: var(--font-primary);
background: var(--clr-100);
color: var(--clr-800);
padding: 0;
margin: 0;
}
h1 {
font-family: var(--font-secondary);
}
header {
background-color: var(--clr-800);
color: var(--clr-100);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 0.5rem var(--clr-800);
height: 40vh;
}
header>h1 {
margin: 0 0 0 4rem;
}
nav>ul {
display: flex;
list-style-type: none;
margin: 0;
padding-right: 3em;
}
nav>ul>li>a {
color: var(--clr-100);
text-decoration: none;
}
nav>ul>li>a:hover {
color: var(--clr-800);
background-color: red;
}
a {
padding: 0 .5em;
margin: 0 .5em;
}
nav,
ul {
height: 100%;
}
a {
min-height: 100%;
display: flex;
align-items: center;
}
<!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">
<title>Website</title>
<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=Bebas+Neue&family=Montserrat:wght#300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1 class="logo">Logo</h1>
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</html>
Related
Ideally I want to keep the same layout when the browser window shrinks. I don't know if I need media queries to do that. I was trying to use flex-shrink but it wasn't having any effect. I thought flex has a default shrink property? I think part of the problem is I have too many css rules that may be conflicting with one another- I'm trying to get it to look like the wireframe image (below). Here is the codepen.
wireframe-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: 'Cantarell', sans-serif;
font-size: 20px;
}
<!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" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src="images\ic-logo.svg" alt="logo" />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul>
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
You will have to set media queries for your elements to adjust their size at a certain browser width. See the sample ones I added below:
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
Of course, feel free to change the sizing as you desire. See it working in the snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: "Cantarell", sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: "Cantarell", sans-serif;
font-size: 20px;
}
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
<!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" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src='https://svgshare.com/i/esC.svg' title='' />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul class="nav-links">
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
Here I am trying to keep the navigation buttons in the center of the navbar using flexbox. But whenever I try to center using the justify-content property using flexbox the logo text also moves along the navigation buttons. I want the logo text on the left corner and buttons on the center. Any fix for this using flexbox?
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.nav .logo {
display: flex;
align-self: flex-start;
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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">
<title>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.css">
<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=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
}
.nav .logo {
display: flex;
align-self: flex-start;
}
.li{
display: flex;
justify-content: center;/*same code but aplys for only li class not whole nav*/
width: 100%;/*fill available space*/
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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">
<title>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.css">
<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=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
here we apply center only for .li class (not for whole nav) and make the .li to fit the remaining space other than logo
/* -----------
1. global-setup
----------- */
* {
margin: 0;
padding: 0;
}
/* -----------
2. navigation-container
----------- */
.nav {
background-color: #BA8C63;
width: 100%;
height: 60px;
display: flex;
justify-content: center;
}
.nav::after {
content: "";
flex: auto;
}
.nav .logo {
flex: 1;
display: flex;
align-content: flex-start;
}
.nav .logo p {
font-size: 30px;
color: white;
padding: 10px;
font-family: 'Oleo Script', cursive;
padding-left: 40px;
}
div.li ul {
align-self: center;
display: flex;
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: #e6cbb3;
font-size: 15px;
text-transform: uppercase;
padding: 20px;
}
a:hover {
background-color: #e6cbb3;
color: #BA8C63;
transition: .5s;
}
<!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">
<title>Flexbox Practice</title>
<link rel="stylesheet" href="flexbox.css">
<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=Oleo+Script&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="logo">
<p>Woody</p>
</div>
<div class="li">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
I'm very new to html and css and when trying to make a navbar, the colour doesn't cover the entire top of page. I've tried adjusting the height and width but to no luck. Here is what the webpage looks like at the moment. As you can see, the blue header doesn't quite touch the top and sides. Any help would be greatly appreciated. Here is the index.html file:
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Noe ice-cream for you</title>
</head>
<body style="background-color: gray;">
<header>
<div class="container">
<img src="assets/subzero.png" alt="logo" class="logo" height="70px">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
And here is the style.css file:
h1{
font-family: 'Open Sans', sans-serif;
}
.paragraph{
font-size: medium;
line-height: 62px;
font-family: 'Open Sans', sans-serif;
}
.container{
font-family: 'Open Sans', sans-serif;
}
header{
background-color:aqua;
padding: 0;
margin: 0;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
header::after {
content: '';
display: table;
clear: both;
}
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 50px;
}
nav a{
text-decoration: none;
text-transform: uppercase;
color: #444;
}
nav a:hover{
color:black;
}
You can add below on your style.css
body {
margin:0;
padding:0;
}
or add
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#5.0.1/reset.css"
on your head tag before including tag link style.css
try this in css :
*{
padding: 0;
margin: 0;
}
Always start by resetting your document and setting the box-sizing property. With box-sizing padding and border are added to the element's height and width. So you can do something like this
*, ::after, ::before {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
I just started taking an HTML/CSS class for beginners and we have a final project where we need to create a multi-page website so I am currently practicing by making a website of my own but I can't seem to figure out how to align the navbar list I have to right of the logo where the logo is on the left side of the navbar.
Here's my code:
HTML:
<!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">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: white;
display: block;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul{
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: var(--primary-color);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
All help would be appreciated!
Set nav as flex container:
body {
background: black;
margin: 0;
color: white;
}
nav {
display: flex;
align-items: center;
background-color: white;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
}
.navbar ul{
display: flex;
list-style: none;
/*margin: 0px 25px 0px 90px;*/
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: black;
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
<!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">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
<style>
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: rgb(255, 238, 0);
display: block;
display: flex;
align-items: center;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</nav>
</body>
</html>
Easiest way to create a navbar. Have a look
You need to adjust Width of the images and use this property to align image to left float:left
body,
div {
margin: 0;
border: 0 none;
padding: 0;
background-color: rgb(65, 63, 63);
}
.md {
background-color: black;
padding: 20px;
}
a {
color: white;
text-decoration: none;
padding: 15px;
}
a:hover {
background-color: rgb(224, 224, 224);
color: black;
}
img{
width: 40px;
height: 30px;
float: left;
margin-top: 15px;
}
<!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">
<title>Document</title>
</head>
<body>
<img src="https://iconape.com/wp-content/files/zy/291859/png/291859.png">
<div class="md">
HOME
BAND
TOUR
</div>
</body>
</html>
After I defined my side menu, I came over this wall that I find hard to break. Thinking back, I should have use css grid instead.
I couldn't find a way to position my main element to the right side of the nav element. I just want to see that H3 in the middle of the remaining body space, to the right. I'm struggling for 2 hours by now so I came to ask for some help.
You have to open fullscreen to really see the page, I haven't created any media queries yet so the style gets stretchy.
Hope you guys have a few minutes to spend with a CSS noob :).
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 30vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 15%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Content Wrapper */
.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* Content Wrapper */
<!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">
<title>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<main class="home-card">
<section class="author">
<h3>My Name</h3>
</section>
</main>
<!-- Content -->
</body>
</div>
</body>
</html>
Wrap the nav and main tags to a wrapper like .nav_wrapper then use flex display to the wrapper as follows to show them side-by-side.
.nav_wrapper {
display: flex;
}
More information about the flex style can be found here.