Problem with Nav css boostrap menu

Asked

Viewed 100 times

0

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

http://i.stack.imgur.com/jF0vn.jpg

But since not everything in life is flowers, I can’t possibly leave one border and the text in the middle, centered between the same edges is there.

I tried everything I know, I did a little research and nothing. Does anyone know how to help? I put the code I have so far in Jsfiddle.

Another thing I "hit" a lot was to put another item, but at the bottom of the bar.

https://jsfiddle.net/c9upLkym/

html css twitter-bootstrap

  • 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.

  • @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.

  • Good afternoon Luan, so let me see if I understand, you want to leave your menu the same as the image?

  • It would be something like this Luan: https://jsfiddle.net/SamirChaves/c9upLkym/1/?

1 answer

2


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

  • Thanks friend, I need to take a deep study in CSS haha. Thanks even!

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.