0
Hello, I got to center my soon and put the links around, the problem and the logo overlap the links, wanted to align and decrease the margin between each link.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Archivo', sans-serif;
/* font-family: 'Lato', sans-serif; */
}
.logomobile{
display: none;
}
.topdois{
float: right;
right: 10px;
position: absolute;
margin-top: 10px;
list-style: none;
text-decoration: none;
color: wheat;
}
.socialIcon{display: none;}
i span{
display: inline-block;
margin-left: 4px;
margin-right: 1px;
list-style: none;
text-decoration: none;
}
.topdois ul li i{
color: #fff;
}
.topdois ul li{
list-style: none;
display: inline-block;
color: #fff;
opacity: 0.9;
font-size: 17px;
cursor: pointer;
text-align: center;
border-right: 1px solid #fff;
line-height: 1;
padding-right: 10px;
padding-left: -10px;
}
.topdois ul li:nth-child(5){
border-right: 1px solid transparent;
}
.topdois ul li:hover{
background-color: orchid;
transition: .3s;
border-radius: 5px 5px 5px 5px;
}
.topdois ul li i {
margin: 0 15px;
}
#menu{
display: none;
}
body {
width: 100%;
height: 100vh;
background: url(https://i.imgur.com/jItSH6a.jpg) no-repeat center;
background-size: cover;
background-blend-mode: darken;
background-color: rgba(0, 0, 0, 0.5);
}
nav {
background-image: url(https://cdn.pixabay.com/photo/2018/01/26/06/01/pattern-3107886__340.png);
background-size: cover;
background-repeat: no-repeat;
background-position: fixed bottom center;
width: 100%;
height: 115px;
}
nav .logo {
line-height: 55px;
position: absolute;
opacity: 0.7;
top: 60px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 300;
}
nav ul{
display: flex;
justify-content: space-between;
position: relative;
top: 53px;
}
nav ul li {
font-family: "Cabin", serif;
list-style: none;
text-transform: uppercase;
font-weight: bolder;
}
nav ul li a {
margin-right: 10px;
text-decoration: none;
color: #fff;
opacity: 0.9;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 16px;
letter-spacing: 1px;
word-spacing: 4px;
display: block;
margin-left: 20px;
z-index: 1;
}
nav ul li a:hover{
background-color: chartreuse;
transition: .3s;
border-radius: 5px 5px 5px 5px;
}
nav>label span {
font-family: "Roboto", serif;
color: #fff;
}
nav>label span {
font-family: "Roboto", serif;
}
input {
display: none;
}
nav ul label {
display: none;
}
nav label {
cursor: pointer;
}
@media (max-width:768px) {
.logomobile img{
width: 280px;
height: 70px;
margin-top: 13px;
margin-left: 10px;
position: absolute;
top: 0px;
display: block;
}
.logomobile{
display: block;
}
.socialIcon {
display: block;
text-align: center;
margin-top: 20px;
}
.socialIcon ul {
padding: 0;
margin: 0;
list-style: none;
}
.socialIcon a i{
margin-top: 4px;
}
.socialIcon a {
color: #fff;
height: 42px;
width: 42px;
background-color: teal;
display: inline-block;
line-height: 33px;
text-align: center;
font-size: 35px;
border-radius: 100%;
margin-right: 14px;
}
.socialIcon a:last-child {
margin-right: 0;
}
.logo {
margin-left: 20px;
position: relative;
width: 170px;
height: 67px;
top: 20px;
}
.topdois{
display: none;
}
#menu{
display: block;
}
nav{
height: 65px;
}
nav ul {
position: absolute;
width: 300px;
height: 100vh;
top: 0;
display: flex;
flex-direction: column;
left: -100%;
padding-top: 100px;
/*background-color: darkred; */
background-image: url(https://cdn.pixabay.com/photo/2017/03/25/18/06/color-2174065__340.pnga);
transition: 0.8s ease;
box-shadow: 8px -8px 10px rgba(0, 0, 0, 0.5);
}
nav ul li a{
color: #fff;
opacity: 1;
font-size: 18px;
}
nav ul li{
display: block;
padding: 11px;
width: 95%;
background-color: darkred;
margin-left: 10px;
border-top: 2px solid rgb(255,255,255, 0.3);
transition: 0.5s ease;
}
nav ul li:nth-child(2){
border: 1px solid transparent;
}
nav>label {
display: flex;
margin-right: 20px;
}
nav ul label {
display: block;
position: absolute;
top: 5px;
right: -47px;
font-size: 51px;
color: #fff;
}
input:checked~ul {
left: 0;
}
} <div class="topdois">
<ul>
<li><a href=".ss"> <i class="fa fa-home"><span>Lista</span></i></a></li>
<li><a href=".ss"> <i class="fa fa-home"><span>Lista</span></i></a></li>
<li><a href=".ss"> <i class="fa fa-home"><span>Lista</span></i></a></li>
<li><a href=".ss"> <i class="fa fa-home"><span>Lista</span></i></a></li>
<li><a href=".ss"> <i class="fa fa-home"><span>Lista</span></i></a></li>
</ul>
</div>
<nav>
<input type="checkbox" id="box">
<label for="box">
<div id="menu"> <span><i class="fas fa-bars" style="font-size:34px"></i></span></div>
</label>
<img src="https://i.imgur.com/7qGd4cE.png" alt="" class="logo">
<ul>
<label for="box">
<span><i class="fas fa-times"></i></span>
</label>
<li><a href="#">Home</a></li>
<li><a href="#">A Teste</a></li>
<li><a href="#">Nossos Produtos</a></li>
<li><a href="#">Receitas</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Contato</a></li>
<div class="logomobile">
<img src="https://www.novitrine.com.br/images/noticia/A55720da696c81.jpga" alt="">
</div>
<div class="socialIcon">
<a href="jsls.com" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="jsls.com" target="_blank"><i class="fab fa-youtube"></i></a>
<a href="jsls.com" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="jsls.com" target="_blank"><i class="fab fa-google"></i></a>
</div>
</ul>
</nav>
Face this structure of your Menu is very strange, this will give you a lot of work to tidy up, take advantage that it is at the beginning and reflect if it is not better to start again.... A hint I’ll give you right away, the STRAIGHT children of a UL, should be just LI, you can’t have Span, Label, or Div, as being the direct child of a UL. About Alignment Search for display:flex and Justify-content: space-between, this will help you
– hugocsl
@hugocsl mano usei space-between, e flex na Nav que é o pai,I’ll see this tip to remove the label, could you try to take a look for me? I’m trying here I haven’t found the solution yet, could you take a look at the pen??
– Level 1 JS
can use the css z-index to define which element is in front.
– rafaelpteixeira