1
I, after a long time researching, took an immense interest in web development and wanted to start building a website myself. I made a layout by photoshop and as my knowledge in HTML5 and CSS3 is almost null, I decided to study through videos on youtube and doubt sites.
I’m building this site through trial and error on top of an example made with flex seen on youtube, only I’m having problems regarding the position of both the logo and social networks and, I’m looking for a way to position the logo a little closer to the menu and make it stay on top of the header, causing the logo along with the ellipse to appear a little lower, not getting in and increasing the size of the header.
The first image is currently my goal
The second is the problem I’m facing now.
*{margin: 0; padding: 0; font-size: 100%; box-sizing: border-box; font-family: 'Opens Sans', sans-serif ;}
nav, ul {list-style: none;}
a {text-decoration: none; cursor: pointer; opacity: 0.9;}
a:hover {opacity: 1;}
header {background-color: #006690; width: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: space-around; align-items: center; padding: 20px 50px;}
header img {width: 200px; margin-left: 25%;}
header nav {display: flex}
header li a {color: white;}
header li {margin: 0 50px;}
header li:first-child {margin-left: 0;}
header li:last-child {margin-right: 0;}
@media (max-width: 900px) {
header {flex-direction: column;}
header img {margin-bottom: 15px;}
}
header li a {font-size: 30px;}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Suporte Digital - Segurança e Controle de acesso</title>
<meta name="description" content="Empresa especializada em Segurança e Controle de Acesso">
<meta name="keywords" content="Segurança, Controle de Acesso, Câmeras, Portões Eletronicos">
<meta name="robots" content="index, follow">
<meta name="author" content="Kaik Bastos">
<link rel="stylesheet" href="./css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="icon" href="./img/Icone.png">
<script src="https://kit.fontawesome.com/b18bc99c07.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<a href="#"><img src="./img/logo.png" alt="Suporte Digital"></a>
<nav>
<li><a href="">Início</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Contato</a></li>
<li><a href="">Loja</a></li>
</nav>
<div class="">
<a href="#"><h1><i class="fab fa-facebook-square fa-2x" style="color: white;"></i></h1></a>
<a href="#"><h1><i class="fab fa-instagram-square fa-2x" style="color: white;"></i></h1></a>
</div>
</header>
</body>
</html>
Well, apparently you can regulate this in the margin... This type of adjustment you have to regulate as you wish. You already know how to debug using browser tools?
– MagicHat
No, how can I do that?
– Kaik Bastos
Which browser does it use?
– MagicHat
At the moment, Chrome
– Kaik Bastos
Cltr + Shift + J then begins to inspect the elements, see which styles are being applied... I am going to vote to close the matter because it is not very clear what you really want (in technical terms). There are several ways to control these measures, need to be more specific
– MagicHat