Problem with nav css menu boostrap

0

I'm trying to make a menu following this template here:

Butsincenoteverythinginlifeisaflower,Icannotleaveaborderandthetextinthemiddle,centeredbetweentheedgesisthesame.

IhavetriedeverythingIknow,Ididalittleresearchandnothing.Doesanyoneknowhowtohelp?I'veputthecodeIhavesofarinJSfiddle.

Anotherthingthathitmealotwastoputanotheritem,butatthebottomofthebar.

link

    
asked by anonymous 15.11.2015 / 20:20

1 answer

2

Ready buddy ... Corrected. I added some DIV's and changed the CSS a bit. It's missing now just add the ICONS that will stay the same. Understand that the menu items are not centered, in this example you have shown, they are on the left, but with the icons pushing them to the right, it 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 changed

#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

    
16.11.2015 / 20:48