0
I have a menu and I’m trying to put the image to the center and leave 3 links to the left and 3 links to the right, I used:
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
But it is only aligned in the mobile version, see below:
/*Main Menu CSS*/
*{
margin: 0;
padding: 0;
}
.header-area{
background:#4DC3CF;
}
.header-area .logotipo {
display: inline-block;
line-height: 55px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main-menu ul{
text-align: center;
}
.main-menu ul li{
list-style:none;
display:inline-block;
position:relative;
}
.main-menu ul li a{
text-decoration: none;
display: inline-block;
font-size:18px;
padding:30px 20px;
margin:0px;
color:#fff;
font-weight: 600;
text-transform: uppercase;
transition: .4s;
}
.main-menu ul li a:hover{
color:#000;
}
/*Dropdown Menu CSS*/
.main-menu ul li ul{
position: absolute;
left:0;
top:100%;
width:200px;
z-index: 999;
transform: scaleY(0);
transform-origin: top center;
opacity:0;
visibility: hidden;
transition: .4s;
background:#4DC3CF;
box-shadow: 0 2px 8px -2px rgb(37, 39, 38);
}
.main-menu ul li:hover ul{
transform: scaleY(1);
opacity:1;
visibility: visible;
}
.main-menu ul li ul li a{
padding:14px 18px;
}
<header class="header-area">
<a href="#" class="logotipo"><img src="https://i.imgur.com/eH60XtT.png" alt="logo alt"></a>
<div class="main-menu">
<nav>
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Services</a>
<ul>
<li><a href="#">Service One</a></li>
<li><a href="#">Service Two</a></li>
<li><a href="#">Service Three</a></li>
<li><a href="#">Service Four</a></li>
<li><a href="#">Service Five</a></li>
</ul>
</li>
<li><a href="#" title="">Portfolio</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
I saw post here and as far as I understood it was to be aligned because of the top: 50% and left and Translate and the display-inline-block would make it stay inside, but it didn’t work.
You can easily do it using bootstrap. visit: https://getbootstrap.com/docs/4.4/getting-started/download/
– Brewerton Santos
I know B4, but in this case I’m using HTML and CSS and with B4 will have to apply the code to Nav-Brand the same way, so I don’t understand why the code isn’t working.
– user181173
@Gotab4 your question is misspelled and it’s hard to understand what you want. Can you rephrase the question?
– Kleber Oliveira
@Kleberoliveira with you, in case I want to put the image in the middle in the menu and leave the links 3 the right and 3 the left, I can call in chat?
– user181173
@Gotab4 tried to answer with the reworked question, see if it is your need.
– Kleber Oliveira