Skip to content
Log in Sign up

Menu Mobile (no User Icon) – How to move hamburger icon left

Move the hamburger icon in the Vehica mobile menu from the right-hand side of the header to the far left, next to the logo, with a short CSS snippet.

1 minute read

This article shows how to move the hamburger icon of the mobile menu to the left.

Vehica mobile header over the homepage hero: the logo on the left, the hamburger icon boxed on the right, and a long green arrow pointing from the icon across to the left
Before: the hamburger icon sits on the right.

Please add this CSS code.

css 
@media (max-width:1200px) {
.vehica-logo {
    left: 60px;
    position: relative;
}

.vehica-mobile-menu__hamburger {
    position: absolute;
    left: 0;
}

.vehica-menu-icon {
    transform: none!important;
}
}

You can read how to add CSS code to all your pages here: How to add CSS code that is future update compatible

Only on narrow screens
The snippet is wrapped in @media (max-width:1200px), so it changes nothing on wider desktop screens. The left: 60px value on the logo is what keeps it clear of the icon — adjust it if your logo overlaps.

It will be displayed like this.

The same Vehica mobile header after the change, with the hamburger icon at the far left edge and the logo moved to its right
After: the icon is at the far left and the logo has shifted across.

Keep reading

How to customize header (menu colors, font-size etc.) Logo – how to change logo image and its size

Ask the people who build Vehica

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?