CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
grimmus
grimmus

Reputation: 513

Bootstrap dropdown menu not completly visible on mobile device

I am having an issue on a mobile version of a website where the dropdown menu doesn't appear completely in view because of the position of the particular menu item and the amount of items in the dropdown

Menu Issue

The image below is how i would like it to appear, so it would focus the area when the parent is clicked.

enter image description here

Would it be possible to have it so the menu scrolls down to show all the sub items when clicked ?

You can view website at http://www.ndb.ie/2016/. It's using the standard Bootstrap menu code.

Upvotes: 1

Views: 1205

Answers (2)

Asim Iqbal
Asim Iqbal

Reputation: 148

Put this CSS in your style.css file

For Center Menu in Responsive 

@media only screen and (max-width: 767px) {
    .nav-justified > .dropdown .dropdown-menu {
        left: 50% !important;
        margin-left: -80px; /* (Half Menu Width in margin left) */
        top: 100%;
    }
}

For removing Scroll in Responsive

.navbar-collapse.in {
    overflow-y: visible !important;
}

Upvotes: 1

Taras Kumpanenko
Taras Kumpanenko

Reputation: 96

You should override bootstrap style. 

.navbar-collapse.in {
    overflow-y: visible!important;
}

Upvotes: 0

Related Questions