Logo above the mobile menu

  • Resolved Miguel

    (@mhagenaars)


    3 years, 1 month ago

    Hey!

    On my site: Link to my website is there a way (maybe with css?) to put the website logo above the mobile menu? So when you open the menu on mobile that it appears on the top left side from the ‘close’ button?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Miguel

    (@mhagenaars)

    I created this fix. Here is the css code. The breakpoint from desktop to mobile version of the header is at 1022 px width. So the CSS code is:

    @media only screen and (max-width: 1023px) {
.primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
    visibility: visible;
}
.primary-navigation-open .menu-button-container {
    background-color: transparent;
}
.primary-navigation>.primary-menu-container {
    top: 95px;
    height: 100vh;
		padding-top: 10px!important;
}
}
    • This reply was modified 3 years, 1 month ago by Miguel.
    Thread Starter Miguel

    (@mhagenaars)

    And for the sticky header version, you have to change 

    .primary-navigation-open .menu-button-container {
    background-color: transparent;
}

    to:

    .tw-header-bg.primary-navigation-open .menu-button-container {
    background-color: transparent;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Logo above the mobile menu’ is closed to new replies.