How to add this vertical divider in navbar?

Question

enter image description here

I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?

I have tried:

.hr_v {
    width: 1px;
    height: 80px;
    border: 0;
    border-left: 1px solid;
    color: gray;
    background-color: gray;
}

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

The css shall be applied on the floated div, not a hr tag.

hr cannot be applied vertically Is there a vr (vertical rule) in html?.

You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :

#floatingAvatarDiv
{    
   border-left: 1px solid gray;
   padding-left: 2px;
}

or create a class since you need it for both divs :

.leftBorderDiv
{    
       border-left: 1px solid gray;
       padding-left: 2px;
}

and add it to your menu container and the avatar container divisions

edited May 23 '17 at 11:58

Community

1
1

answered Jul 03 '15 at 08:14

KAD

10,972
4
31
73

but i cant add the space between div and the border, right? – ihateboss Jul 03 '15 at 11:28
sure you can, that's what the padding is for, If you can post your html i can give you a snippet to make it more clear. – KAD Jul 03 '15 at 11:40

score 0 · Answer 2 · answered Jul 03 '15 at 08:23

0

You could use :before

.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}

answered Jul 03 '15 at 08:23

itacode

3,721
3
21
23

score 0 · Answer 3 · answered Jul 03 '15 at 08:29

In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.

How to add this vertical divider in navbar?

3 Answers3