Remove burger menu from desktop view Ella Theme

Store Design
, ,

Topic summary

A user wants to remove the hamburger/burger menu icon from desktop view and reposition the logo to the left side in the Ella Shopify theme.

Solutions provided:

  • Edit the header.liquid file to make code changes
  • Add custom CSS to the theme’s stylesheet (theme.scss.liquid or styles.scss.liquid in the Assets folder)

Recommended CSS approach:

Add the following code at the bottom of the stylesheet:

@media only screen and (min-width: 768px) {
  .hamburger-icon.icon-menu {
    display: none;
  }
  .header-middle.logo.col-6.col-sm-4 {
    position: relative;
    right: 500px;
  }
}

This hides the burger menu on desktop screens (768px+) and repositions the logo. A screenshot showing the expected result was shared. The discussion appears resolved with working CSS provided.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

I want to remove the burger menu and place the logo on the left side on the desktop view. Here is the link to my store and the password is saebot : https://www.loulouis.com/

1 Like
2

For this you can edit header.liquid file and make changes in code there

3

Hi @Loulouis ,

I undertand that you want to remove the burger menu and place the logo on the left side on the desktop view.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles. (better you put in the theme.scss folder since it’s a header).
  4. At the bottom of the file, add the following CSS code:
  5. And Save.
@media only screen and(min-width: 768){
.hamburger-icon.icon-menu {
    display: none;
}
.header-middle-logo.col-6.col-sm-4 {
    position: relative;
    right: 500px;
}
}