This topic contains 8 replies, has 2 voices, and was last updated by Sean Sean 1 year, 11 months ago.

Is it possible to make top menu not go next line when enter mobile mode?


  • jonahfang
    Participant

    Posts: 12
    Member Reply #7023

    I have make following custom.css to put the menu-toggler to the left:

    
    
    .page-header.navbar .menu-toggler.responsive-toggler {
    
    float: left;
    
    margin: 15.5px 6px 0 0; }
    
     
    
    @media (max-width: 480px) {
    
    .page-logo img {
    
    display:none;}
    
    .page-header.navbar .top-menu {
    
    display: none;}
    
    }
    

    I use the layout of '(metronic_v4.5.6)/theme/admin_1_material_design/index.html'.
     

     

    • This topic was modified 1 year, 11 months ago by  jonahfang.
    Sean
    Sean
    Keymaster

    Posts: 4470
    Support Staff Reply #7041

    Hi,

    Yes, that should be possible if you have enough space. If possible can you provide us a test link to your developing site in a private reply so we can check your code and point you out.

    Thanks.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7068

    My site for dev is here:

    http://hxtest.hothink.net.cn/n
    
    Sean
    Sean
    Keymaster

    Posts: 4470
    Support Staff Reply #7075

    Hi,

    Could you please explain it with more details ? Do you want to put move the sidebar menu toggler to the left, before the logo ? Or can you please provide a muck up for the customization you want to do ?

    Thanks.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7080

    As you can see from my test website,I have put the sidebar menu toggler to the left and hide the logo. I now just want to put the top-menu content to the right of top line. not go next line.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7088

    I explain again by image here:
    my need

    Sean
    Sean
    Keymaster

    Posts: 4470
    Support Staff Reply #7111

    Hi :),

    Please clear your previous code and try below one in custom.min.css:

    @media (max-width: 480px) {
    .page-header.navbar .top-menu {
    display: inline-block;
    clear: none;
    float: right;
    }
    }

    If you need any further clarifications please let us know.

    Thanks.


    jonahfang
    Participant

    Posts: 12
    Member Reply #7115

    Thanks. It works!

    Sean
    Sean
    Keymaster

    Posts: 4470
    Support Staff Reply #7116

    Great! Good luck with your project 🙂

You must be logged in to reply to this topic.