Jump to content


Photo

Bootstrap menu jumps from accordian to dropdown in mobile view

jquery css mega-menu

  • Please log in to reply
No replies to this topic

#1 PaulMcF87

PaulMcF87

    Forum Newcomer

  • Members
  • Pip
  • 2 posts

Posted 30 August 2017 - 01:42 PM

I have copied the menu from: www.bootsnipp.com/snippets/featured/mega-menu-with-tabs-navigati‌​‌​on 

 

you will notice that when you drop the screen size down to mobile/tablet width that the menu forms an accordian dropdown.

 

The top dropdown works fine at first - opens within the accordian...

 

however when you then select a different tab at the bottom - men, women etc... instead of changing within the same area, it opens a dropdown at the bottom of the list

 

does anyone know how to stop this?

 

I have removed the below CSS code and it works fine when inspecting element. but not sure how to do thismyself as the code comes from Bootstrap CSS.

 

Also the code is needed for fullscreen/desktop view. only seems to cause problems on mobile/tablet. although it may be something else which i have not found which is the problem

 

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0px 6px 12px rgba(0,0,0,0.175);
}
 
any help would be great

Edited by PaulMcF87, 30 August 2017 - 01:56 PM.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users