Edit "menu" into the header

Store Design
, , ,

Topic summary

Goal: On desktop, show the word “Menu” to the right of the header’s menu icon on seraneeva.com, make it clickable to open the menu, and nudge right-side header items left.

Approaches proposed:

  • Theme settings: In a theme similar to Envy, use Online Store > Themes > Customize > Header, choose Template 2, and edit the “Title Icon Menu.” Screenshots were provided; applicability may vary by theme.
  • Code: An initial suggestion to add code in theme.liquid below the tag was posted, but the code block was empty. A subsequent CSS-only snippet injects “Menu” via a :before pseudo-element on .site-nav–mobile for desktop (min-width: 991.98px), increases link padding, and shifts the right header group left with margin-right.

Latest update: The CSS renders “Menu” text and adjusts alignment on desktop. The requester asked to make “Menu” clickable to open the navigation; the provided update contains only CSS (no JavaScript or markup changes), so click behavior is not implemented in the shown code.

Status: Partially addressed. Visual styling achieved; the click-to-open requirement and final verification remain open. Images/screenshots are referenced for guidance.

Summarized with AI on December 28. AI used: gpt-5.
1

Hi guys,

I would greatly appreciate if someone could help with this! On just desktop, to right of my menu icon in the header, I would like to the word “menu” written out. Pic for reference. My website is seraneeva.com.

Screenshot 2024-05-22 at 4.43.07 PM.png

1 Like
2

hi @flammagreg

I don’t have your theme and I will use a theme similar to your envy theme

you can follow the steps

Step 1: Please navigate to Online store => Themes => Customize

Step 2: Click to header and choose template 2, edit Title Icon Menu

image.png
image.png1902×862 146 KB

Step 3: Edit and save, go to the store front

image.png
image.png1383×786 78.4 KB

We’re happy to support you. Can you give us a like or accept solution? This can greatly motivate us to contribute to our community.

1 Like
3

Hi,

The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I’ll help.

  1. Navigate to the ‘Edit Code’ option in your theme settings, then search for ‘theme.liquid’ in the search bar.

  2. Paste the following code below the ‘’ tag. Please refer to the attached screenshot for guidance.

Terence

1 Like
4

Thank you! That looks great. Do you also know how to make the "Menu"clickable so when clicked the menu opens?

5

Sorry to keep asking questions, but do you also know how to move everything in the top right of the header to the left a little?

6

you are welcome.

Yes, we can easily do what you asked. Just delete the previous code I sent and add the code below.

@media (min-width: 991.98px){
  .site-nav--mobile {
    position: relative!important;
}

.site-nav--mobile:before {
    position: absolute!important;
    content: "Menu";
    top: 50%!important;
    transform: translateY(-50%)!important;
    left: 55%!important;
}

}

.site-nav--mobile .site-nav__link {
    padding: 0 50px 0 10px !important;

}

    .site-header__wrapper__right.top-links {
        margin-right: 155px!important;
    }