This topic contains 9 replies, has 3 voices, and was last updated by Sean Sean 2 years, 9 months ago.

Change Width of Notification Dropdown


  • decimatech
    Participant

    Posts: 2
    Member Reply #6702

    How can I change notification dropdown’s width? Thank you for help.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6717

    Hi :),

    Thanks for contacting our support. May i know which admin theme are you referring and which Metronic version are you using ? Basically you can override any element css code in custom.css . Once you provide us required details we will point you out further.

    Thanks.


    decimatech
    Participant

    Posts: 2
    Member Reply #6718

    Hello,

    I am using Admin 1 Rounded Dashboard 1. http://keenthemes.com/preview/metronic/theme/admin_1_rounded/index.html

    Thank you for your interest.

     

     

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #6727

    Hi :),

    You can change the width by overriding the dropdown with below css code in custom.min.css:

    .page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu {
    min-width: 160px;
    max-width: 275px;
    width: 275px;
    }

    Good luck!

    Thanks.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7290

    I use ‘http://localhost:8000/theme/admin_1_material_design/index.html’, and want to change the width of dropdown menu (dropdown-user) and text font-size. The following code just not work:

     

    < .page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-menu {

    min-width: 60px;

    max-width: 175px;

    width: 175px;

    font-size : 15px;

    }

     

    • This reply was modified 2 years, 9 months ago by  jonahfang.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #7302

    Hi,

    May i know what Metronic version are you using ? Which dropdown menu are you referring to in http://keenthemes.com/preview/metronic/theme/admin_1_rounded/index.html ?

    Did you add the above css code in your custom.min.css ?

    Thanks.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7305

    I use v4.6, and it works for notification dropdown. How to apply to user dropdown ( and change font-szie)?

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #7307

    Hi,

    You can reuse the same code for other dropdown menus as well. Just change the dropdown class name accordingly.

    Thanks.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7308

    It works. Thanks.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #7326

    Great! You are welcome 🙂

You must be logged in to reply to this topic.