CODEWITHSUNDEEP
css
ihateboss
ihateboss

Reputation: 23

How to add this vertical divider in navbar?

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;
}

Upvotes: 2

Views: 2755

Answers (3)

King Size
King Size

Reputation: 397

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.

Upvotes: 0

itacode
itacode

Reputation: 3787

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 */
}

Upvotes: 0

KAD
KAD

Reputation: 11112

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

Upvotes: 2

Related Questions