BugWP logo BugWP
Back to Community
Home / Community / Theme → Zakra

How to Customize Your Zakra Theme Mobile Menu Position and Layout

14 threads Sep 16, 2025 Theme → Zakra

Content

Many Zakra theme users want to adjust the position and layout of their mobile menu, particularly the hamburger icon and logo alignment. This is a common request to improve the mobile user experience and visual design on smaller screens. Based on community discussions, here are the most effective solutions.

Common Mobile Menu Customization Requests

  • Moving the hamburger menu icon from the right to the left side.
  • Centering the logo when the menu is moved to the left.
  • Keeping the logo and hamburger icon on a single line to avoid wasted space.
  • Changing the side from which the mobile menu expands (e.g., from right to left).

Solution: Using Custom CSS

Most of these layout changes can be achieved by adding custom CSS to your site. You can add this code by navigating to Appearance > Customize > Additional CSS in your WordPress dashboard.

1. To Move the Hamburger Menu to the Left and Center the Logo

This CSS will reposition the mobile menu toggle to the left and adjust the logo placement for a centered look.

.tg-site-header-bottom .tg-container--flex {
    flex-direction: row-reverse;
}

2. To Make the Mobile Menu Expand from the Right

By default, the mobile menu often expands from the left. This code changes the animation so it opens from the right side of the screen.

.tg-mobile-navigation.tg-mobile-navigation--opened {
    right: 0;
    left: unset;
}

.tg-mobile-navigation {
    right: -100%;
    left: unset;
}

3. To Align the Logo and Hamburger Icon on One Line

If your logo and menu icon are breaking onto two lines, this CSS can help force them onto a single line by adjusting their flex properties.

@media screen and (max-width:768px) {
    .tg-block--one {
        flex-basis: 80%;
    }
}

Important Considerations

  • Test Responsively: Always check your changes on different screen sizes (mobile, tablet) after adding CSS.
  • Child Themes: For more permanent and upgrade-safe changes, consider adding this code to a child theme's stylesheet.
  • Theme Updates: The Zakra team frequently releases updates that may include new options for header layout. It's a good idea to check your theme's customizer settings after an update, as new features are often added.

These CSS snippets provide a strong foundation for customizing your mobile menu's position and behavior without needing to edit theme files directly.

Related Support Threads Support