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
  • September 25, 2018 at 8:47 am #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

    September 25, 2018 at 10:58 am #78887

    Elise Noromit
    Member

    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

    September 25, 2018 at 11:40 am #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

    September 25, 2018 at 12:54 pm #78924

    Elise Noromit
    Member

    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

    September 25, 2018 at 1:34 pm #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.
    September 26, 2018 at 6:13 am #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

    September 26, 2018 at 11:36 am #79167

    Maikel
    Participant

    Hi,

    Great support, thank you very much!!

    Best regards,

    Maikel

    September 26, 2018 at 12:41 pm #79185

    Elise Noromit
    Member

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

    Best Regards

  • Author
    Posts
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.