Edit "menu" into the header

flammagreg · ‎05-22-2024

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.

TerenceKEANE · ‎05-23-2024

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 '<head>' tag. Please refer to the attached screenshot for guidance.

<style>



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

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

}

  
</style>

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

BSSCommerce-HDL · ‎05-22-2024

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

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

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.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

TerenceKEANE · ‎05-23-2024

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 '<head>' tag. Please refer to the attached screenshot for guidance.

<style>



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

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

}

  
</style>

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

flammagreg · ‎05-23-2024

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

flammagreg · ‎05-23-2024

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?

TerenceKEANE · ‎05-23-2024

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;
    }

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

Edit "menu" into the header

Edit "menu" into the header

Community Blog Articles