Ready buddy... Fixed. I added some DIV’s and changed the CSS a little bit. Now just add the ICONES that will look the same. Understand that the menu items are not centered, in this example you showed, are on the left, but with the icons pushing them to the right, gives this false impression of centralization.
<!----------- Menu --------------------->
<div id="sidemenu">
<div id="menu-header"></div>
<div id="menu-parent">
<ul id="menu-itens">
<li class="dashboard">
<div>
<div class="item-menu-icon"></div>
<span class="item-menu-title">Dashboard</span>
</div>
</li>
<li class="lojistas">
<div>
<div class="item-menu-icon"></div>
<span class="item-menu-title">Lojistas</span>
</div>
</li>
<li class="usuarios">
<div>
<div id="item-menu-icon" class="glyphicon glyphicon-user"></div>
<span class="item-menu-title">Usuarios</span>
<div>
</li>
<li class="notificacao">
<div>
<div class="item-menu-icon"></div>
<span class="item-menu-title">Notificacoes</span>
</div>
</li>
<li class="relatorio">
<div>
<div id="item-menu-icon" class="glyphicon glyphicon-signal"></div>
<span class="item-menu-title">Relatorios</span>
</div>
</li>
</ul>
Dashboard
CSS modified
#menu-header {
width: 199px;
height: 99px;
background: url('assets/logo_menu.png') center no-repeat;
background-size: 210px 70px;
}
#menu-parent{
padding-left:20px;
padding-right:20px;
}
h3, h2 {
font-size: 20px;
color: #9B9B9B;
margin: 25px;
margin-left: 230px;
}
#menu-itens {
margin: 35px auto;
padding: 0px;
}
.item-menu-title {
font-size: 14px;
color: #9B9B9B;
font-weight: 300;
}
.active .item-menu-title {
color: #fff8ff
}
#menu-itens li {
cursor: pointer;
border-radius: 2px;
display: block;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
padding-bottom: 5px;
}
#menu-itens li > div{
border-bottom: 1px solid #9B9B9B;
padding-top: 15px;
padding-bottom: 15px
}
#menu-itens li:hover {
background: rgba(0, 0, 0, 0.05)
}
#sidemenu {
position: fixed;
left: 0;
top: 0;
min-height: 100%;
height: auto;
width: 185px;
padding-right: 2.5px;
padding-left: 2.5px;
background: #f0415f;
box-shadow: 6px 0px 10px #c4c4c4;
}
header {
width: 100%;
height: 50px;
background: #dcddde;
border-top: 3px solid #CCC;
}
.glyphicon {
font-size: 30px;
}
Example:
Updated menu
In Jsfiddle, the linked Styles do not load, you must place in the area dedicated to css, everything that can be relevant to the issue to be solved. Then we can help you.
– Samir Braga
@Samirbraga Good afternoon Samir, the Tyles on the menu are all on Jsfiddle. The lynched ones are just the style of the logo ( I can’t even put) and the Bootstrap ones I put on but haven’t used yet.
– LMaker
Good afternoon Luan, so let me see if I understand, you want to leave your menu the same as the image?
– Samir Braga
It would be something like this Luan: https://jsfiddle.net/SamirChaves/c9upLkym/1/?
– Samir Braga