Position arrow from a dropdown menu correctly

Navigation
5

I added an arrow to my Bootstrap 3 dropdown menus, but I'm having trouble positioning the arrow correctly below dropdown-toggle , below is a demo image:

On the left is my current scenario, with the badly positioned arrow ( right: 45% ). On the right is how I would like to leave.

Can anyone help me with this? Below my CSS code: 

.dropdown-menu:before {
    position: absolute;
    top: -7px;
    right: 45%;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    right: 45%;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}
    
asked by anonymous 08.03.2015 / 05:46

1 answer

2

I once had this problem too. What I did was just change the ' right: __' ' property.

It determines the distance of the object from the right side, in which case it is 45% away from the right edge. Try decreasing until you get the result you want. I believe that with ' right:10%; ' you get the desired result.

I hope I have helped.

Edit: If you want greater precision, you can use ' px ' instead of ' % '.

Well, imagine the following: on a small, large screen it will be ' 10% ' away from the side, however this % is different on a mobile phone and on a 1080p monitor. Already with the value in px it will be constant in all resolutions.

Then you can also use: ' right:15px ' or another value that gives the desired result.

    
14.03.2015 / 14:21
How to create texture of snow and particles in Unreal engine 4 Problems drawing an oval in a panel (JAVA)