Position arrow from a dropdown menu correctly

Question

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

On the left is my current scenario, with Arrow poorly positioned (right: 45%). On the right is how I’d like to leave.

Can anyone help me in 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: '';
}

Answer 1

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

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

I hope I’ve helped.

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

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

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