Solved

Edit "menu" into the header

flammagreg
Trailblazer
250 0 38

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

Accepted Solution (1)

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

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

Replies 5 (5)

BSSCommerce-HDL
Shopify Expert
769 249 263

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

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

image.png

 

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

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
Trailblazer
250 0 38

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

flammagreg
Trailblazer
250 0 38

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
Shopify Partner
511 86 78

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