Home Forums Basel support forum Moving the menu from right to left on mobile

Moving the menu from right to left on mobile

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

    Maikel
    Participant

    Hi support,

    Is it possible to move the = button from the right to the left on mobile devices?

    If so how can I do this?

    Also, centered logo would be very nice!

    Beste regards,

    Maikel

    #78887

    Hello,

    Please add this code to the Theme settings > Custom CSS > Mobile

    .main-header {
        position: relative;
    }
    .main-header .right-column .mobile-nav-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 0;
        
    }
    .main-header .basel-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    Best Regards

    #78903

    Maikel
    Participant

    Hi support,

    Thank you very much!

    Very nice!

    I would like to have the same for my sticky header.

    Best regards,

    Maikel

    #78924

    Hello,

    Please replace the code provided with this one:

    .sticky-header,
    .main-header {
        position: relative;
    }
    
    .sticky-header .right-column {
    	height: 60px;
    }
    
    .sticky-header .right-column .mobile-nav-icon,
    .main-header .right-column .mobile-nav-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 0;
        
    }
    
    .sticky-header .basel-logo,
    .main-header .basel-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    Best Regards

    #78930

    Maikel
    Participant

    Hi support,

    This code doesn’t work well…

    Now I have a large white block at the top (see image).

    And sticky header doesn’t work anymore.

    Best regards,

    Maikel

    Attachments:
    You must be logged in to view attached files.
    #79081

    Bogdan Donovan
    Keymaster

    Hi,

    Please replace the code provided with this one:

    .main-header {
        position: relative;
    }
    
    .sticky-header .right-column {
    	height: 60px;
    }
    
    .sticky-header .right-column .mobile-nav-icon,
    .main-header .right-column .mobile-nav-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-left: 0;
        
    }
    
    .sticky-header .basel-logo,
    .main-header .basel-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    Regards

    #79167

    Maikel
    Participant

    Hi,

    Great support, thank you very much!!

    Best regards,

    Maikel

    #79185

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Moving the menu from right to left on mobile’ is closed to new replies.