How to add top-right arrow in bootstrap navbar dropdown menu


Tags: html,css,twitter-bootstrap,css-shapes

Problem :

How do I make the arrow in the middle of dropdown menu go to the right exactly under the gear-icon ?

Screenshot

enter image description here

CSS

.dropdown-menu > li > a {
    /*     border-bottom: 1px solid #DDDDDD; */
    padding: 8px 20px;
    color: #333333;
}
.dropdown-menu > li:first-child > a{
    border-radius: 10px 10px 0 0;
}
.dropdown-menu > li:last-child > a{
    border-bottom: 0 none;
    border-radius: 0 0 10px 10px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #F5F5F5;
    color: #333333;
    opacity: 1;
    text-decoration: none;
}
.navbar-toggle{
    margin-top: 19px;
    margin-bottom: 19px;
    border: 0;
}
.navbar-toggle .icon-bar {
    background-color: #FFFFFF;
}
.navbar-collapse, .navbar-form {
    border-color: rgba(0, 0, 0, 0);
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: rgba(0,0,0,0);
}


@media (min-width: 768px){
    .navbar-form {
        margin-top: 21px;
        margin-bottom: 21px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .navbar-search-form{
        display: none;
    }
    .navbar-nav > li > .dropdown-menu, .dropdown-menu{
        display: block;
        margin: 0;
        padding: 0;
        z-index: 9000;
        position: absolute;
        -webkit-border-radius: 10px;
        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
        border-radius: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        opacity: 0;
        -ms-filter: "alpha(opacity=0)";
        -webkit-filter: alpha(opacity=0);
        -moz-filter: alpha(opacity=0);
        -ms-filter: alpha(opacity=0);
        -o-filter: alpha(opacity=0);
        filter: alpha(opacity=0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
        -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
        -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
        -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
        transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);

    }
    .navbar-nav > li.open > .dropdown-menu, .open .dropdown-menu{
        -webkit-transform-origin: 29px -50px;
        -moz-transform-origin: 29px -50px;
        -o-transform-origin: 29px -50px;
        -ms-transform-origin: 29px -50px;
        transform-origin: 29px -50px;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        -ms-filter: none;
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        -o-filter: none;
        filter: none;
    }
    .dropdown-menu:before{
        border-bottom: 11px solid rgba(0, 0, 0, 0.2);
        border-left: 11px solid rgba(0, 0, 0, 0);
        border-right: 11px solid rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        position: absolute;
        left: 100%;
        margin-left: -60%;
        top: -11px;
    }
    .dropdown-menu:after {
        border-bottom: 11px solid #FFFFFF;
        border-left: 11px solid rgba(0, 0, 0, 0);
        border-right: 11px solid rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        position: absolute;
        left: 100%;
        margin-left: -60%;
        top: -10px;
    }
}

HTML

<li ng-if="authCheck">
     <a href="#" data-toggle="dropdown" class="dropdown-toggle" title="Settings"><i class="ionicon ion-gear-b"></i></a>

                <ul class="dropdown-menu">

                    <li><a href="#">Action</a></li>

                    <li><a href="#">Another action</a></li>

                    <li><a href="#">Something else here</a></li>

                    <li class="divider"></li>

                    <li><a href="#">Separated link</a></li>

                    <li class="divider"></li>

                    <li><a href="#">One more separated link</a></li>

                </ul>
            </li>
        </ul>

  </li>


Solution :

You have to edit the position of the :before & :after selectors.

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px; /* Example: right:10px; */
  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;
  left: 10px; /* Example: right:10px; */
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

In your case you will have to change the left property to right and play with the value in pixels in order to position the arrow right below the icon.

DEMO


    CSS Howto..

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    CSS: How to center element that is bigger then the container?

    How to fix image to bottom right in gallery

    (HTML/CSS) How do I repeat items like on Google or Reddit?

    How to select two different elements with an XPath query

    CSS transform Scale translates the object, how to avoid this?

    CSS - How to center a DIV menu

    How important is it to be leaving out the last ';' inside a set of CSS rules

    How to apply a class in the current slide using bxslider?

    how to remove resize in text area tag

    How to make triangle section separator [closed]

    how to deal with suffix and prefix in css

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    How to specify styles for h:panelgrid in jsf

    how to change single li element in a menu using lists?

    How can I center a table relative to one column in HTML/CSS?

    How can I create a “tooltip tail” using pure CSS?

    How to make a DIV section clickable?

    CSS - how to get position: absolute; to work well with different screen sizes

    How do I get a div to change the max-height upon window resize?

    Why does overflow hidden affect height and how can I fix it in this example?

    Jquery: show IMG on click

    How to make this layout in CSS?

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?

    contenteditable does not show pseudoselector :before in safari

    How to I get this element to span 100% of LI? [closed]

    How to change when Jquery edits my CSS upon reaching an anchor point?

    Selenium: How to get text from within an html tag which has another tag in it

    How to scale jumbotron bootstrap on larger monitors?

    How to convert a 'div' into a dropdown using CSS/Jquery