Change Hamburger Menu location and increase Mobile Logo size

[Lavished]

please help.

1. this customized theme , how can I move the hamburger menu to the left size and make smaller?

2. how can I increase the SVG logo size in the mobile view only.

My Store

pw : 123test

thank you.

[Mateen_Asghar]

Hi @Lavished , follow these steps:

Step 1: Log in to Shopify Admin1. Go to your Shopify Admin.

1. Navigate to Online Store > Themes.
2. Find your current theme and click Actions > Edit Code.

Step 2: Locate the CSS File1. In the theme editor, go to the Assets folder.

1. Find and open base.css, theme.css, or any other CSS file used in your theme.

Step 3: Add CSS for the Hamburger Menu1. Scroll to the bottom of the CSS file.

1. Copy and paste the following code:

/* Move Hamburger Menu to the Left */
.header__menu-container {
    position: absolute;
    left: 10px; /* Adjust this value to move further left or right */
    top: 20px; /* Adjust for vertical alignment */
}

/* Resize Hamburger Menu */
    .header__menu-container svg {
        width: 4rem !important; /* Adjust this value for smaller size */
        height: 4rem !important;
    }
}

• Save the changes.

  Step 4: Add CSS for Mobile Logo Size1. Stay in the same CSS file.

  1. Scroll to the bottom and paste this code:

/* Increase Logo Size for Mobile */
@media (max-width: 768px) {
    .logo svg {
        width: 150px; /* Adjust this value for the desired size */
        height: auto; /* Maintain aspect ratio */
    }
}​

• Save the changes.

If this solution helps you, give it a like and mark it as the accepted solution. Happy to assist further if needed!

[Lavished]

sorry neither of the codes worked . mobile menu the same , in the center.

[GTLOfficial]

Hello @Lavished

1. how can I move the hamburger menu to the left size and make smaller?

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.header__menu-container {
left: 7% !important;
top: -45px !important;
}
.header__menu-container svg {
width: 5rem !important;
height: 5rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Lavished]

Hello this worked but the icon is much bigger in my device it overlaps the search button. can you delete the color scheme around it? thank you.

also any idea how to get this svg logo bigger on mobile only ?