Responsive menu icon left instead of right

Home › Forums › Jevelin Theme › Responsive menu icon left instead of right

Home › Forums › Jevelin Theme › Responsive menu icon left instead of right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    RESOLVED Posts

  • adorbit
    Participant

    Hi!

     

    Is it possible to have the responsive menu icon on the left side instead of the righ side?

     

    Thanks!

    Shufflehound Support
    Moderator

    Hi @adorbit,

     

    I hope you are well today and thank you for your question.

     

    You can try achieving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    #header-navigation-mobile li.menu-item.sh-nav-dropdown {
    position: fixed;
    left: 70px;
    top: 50px;
}

     

    Best regards,
    Shufflehound team

    adorbit
    Participant

    Hi there,

     

    Thanks for the answer and sorry for my late reply 😉

    If I use that CSS the menu is left but it’s fixed in the left corner displayed over the logo.

     

    The ideal situation is that ‘normal’ situation (menu right, logo left) is just switched: Menu left and logo right. I use the child theme so I can edit theme files if neccesary.

     

    Fun fact: most people have their phone in their left hand so the hamburger menu on the left side is more convenient for  most people. Maybe build it in the configuration section so you can choose?

     

    Thanks in advance!

    Shufflehound Support
    Moderator

    Could you please share me your site URL where it’s displaying so that I can help you to achieve it?

    adorbit
    Participant

    Hi,

     

    Thanks for your quick reply. The URL is:

    https://tijmutrecht.adorbit.nl/menu/

     

    As you can see the logo is displayed under the hamburger menu.

     

    Thanks!

    Kind regards,

     

    Rob / The Netherlands

    Shufflehound Support
    Moderator

    Solution for this topic

    Please remove the above shared CSS code from your site and use the below CSS code.

     

    .sh-header-mobile-navigation .sh-table-cell.sh-group {
    float: right !important;
}

.sh-header-mobile-navigation .sh-table-cell {
    display: block;
    float: left !important;
}

    adorbit
    Participant

    Thanks! That worked like a charm 😉

     

     

    Cheers,

     

    Rob

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)