Change mobile menu size & location

  • Resolved domibror

    (@domibror)


    3 years, 8 months ago

    Hi Ben,
    Period Pro user here, i want to change the size of the hamburger menu on mobile because it is way to big and change the location of the menu up to top right like you see on most of the mobile friendly websites today, is that possible ?

    Thank You,

    Adam

    • This topic was modified 3 years, 8 months ago by domibror.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi Adam,

    Thanks for upgrading!

    I think the following CSS should work well for that. It will move the toggle button up to the right beside the title and tagline.

    @media all and (max-width: 899px) {

  .title-container {
    float: left;
    width: calc(100% - 48px);
    margin-bottom: 12px;
  }
  .toggle-navigation {
    float: right;
  }
  .menu-primary-container {
    clear: both;
  }
}

    Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.

    Thread Starter domibror

    (@domibror)

    Thank you so much! Is it posssible to change the size of the hamburger menu?

    Theme Author Ben Sibley

    (@bensibley)

    Sure thing!

    You can add this CSS to make it smaller:

    .toggle-navigation svg {
	width: 30px;
}

    You can further modify the “30px” value to make it bigger/smaller and the height will scale with it.

    Thread Starter domibror

    (@domibror)

    Thank you so much! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change mobile menu size & location’ is closed to new replies.