Forum Discussion

Myko_P's avatar
Myko_P
Expert
7 years ago

User dropdown menu on XS and SM screens (responsive skin)

Hi,

We are preparing our community website to the responsive upgrade. On the stage instance we got responsive skin with some basic styling customizations made but overall pretty close to the default responsive skin.

I noticed that by default user dropdown menu shown on click only on large and medium screens. On the small and extra small screens when you click on the user avatar nothing happens.

How can I enable dropdown user menu on the small and extra small screens too?

Thank you!

  • Parshant's avatar
    Parshant
    7 years ago

    Myko_P,

    Check below css class and rule in your community CSS.

    At screen size upto 991px this css rule hides the user dropdown menu.

    @screen and (max-width: 991px){
.lia-menu-user-dropdown .lia-menu-user-nav {
	display: none;
}
}

    You have to overide this css to something to like this:

    @screen and (max-width: 991px){
.lia-menu-user-dropdown .lia-menu-user-nav {
	display: block;
}
}

     

     

  • Parshant's avatar
    Parshant
    Boss
    7 years ago

    Myko_P,

    There might be some issue in your css which won't let user navigation to show on small devices. We didn't face this issue for other responsive community.

    • Myko_P's avatar
      Myko_P
      Expert
      7 years ago

      Parshant Even when all our CSS customizations removed from the skin the issue still persists on small screen devices.

      Could you tell me which default responsive skin CSS class or maybe classes responsible for user menu dropdown on click/tap?

      Thanks!

      • Parshant's avatar
        Parshant
        Boss
        7 years ago

        Myko_P,

        Check below css class and rule in your community CSS.

        At screen size upto 991px this css rule hides the user dropdown menu.

        @screen and (max-width: 991px){
.lia-menu-user-dropdown .lia-menu-user-nav {
	display: none;
}
}

        You have to overide this css to something to like this:

        @screen and (max-width: 991px){
.lia-menu-user-dropdown .lia-menu-user-nav {
	display: block;
}
}