[Share] Change text of “back” in Mobile Menu Navigation

To change “back” to another text in mobile menu navigation, you can use below CSS code to Website Tools > Custom CSS.

#1. All Pages

a.header-menu-controls-control.header-menu-controls-control--active>span:nth-child(2) {
	visibility: hidden;
}
a.header-menu-controls-control.header-menu-controls-control--active>span:nth-child(2):before {
  visibility: visible;
  content: "new back";
  width: 100%;
}

#2. Specific Page

First, you need to find Page ID.

In my example, it is: #collection-6673f2e18432c25013aee99f

Next, use this CSS code

#collection-6673f2e18432c25013aee99f {
  a.header-menu-controls-control.header-menu-controls-control--active>span:nth-child(2) {
	  visibility: hidden;
  }
  a.header-menu-controls-control.header-menu-controls-control--active>span:nth-child(2):before {
    visibility: visible;
    content: "new back";
    width: 100%;
  }
}

Hi, If I want to use an image instead of a word or symbol to replace "new back". (I want to use my own image of a triangle.) What code do I need to use instead? Many thanks for your help.

13 hours ago, randm said:

Hi, If I want to use an image instead of a word or symbol to replace "new back". (I want to use my own image of a triangle.) What code do I need to use instead? Many thanks for your help.

You can use this CSS code. Replace with your image url.

div.header-menu-controls span {
    color: transparent !important;
    background-image: url(https://cdn.pixabay.com/photo/2023/12/04/18/31/chrysanthemum-8430098_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left left;
}
div.header-menu-controls span:not(:last-child) {
    display: none;
}

Hi, Tuanphan, Many thanks, that's works, I really appreciate it. Sorry for another question, but I now have a conflict with some other code that I was using to remove the underlines and the other chevrons on the overlay page. 
I was using: 

nav.header-menu-nav-list .header-menu-nav-item * {background-image: none !important; text-decoration: none !important; border: none !important;}

what do I need to use instead, many thanks if you can help

1 hour ago, randm said:

Hi, Tuanphan, Many thanks, that's works, I really appreciate it. Sorry for another question, but I now have a conflict with some other code that I was using to remove the underlines and the other chevrons on the overlay page. 
I was using: 

nav.header-menu-nav-list .header-menu-nav-item * {background-image: none !important; text-decoration: none !important; border: none !important;}

what do I need to use instead, many thanks if you can help

Change your code to this. If it doesn't work, please share site url, I can check easier

nav.header-menu-nav-list .header-menu-nav-item *:not(span) {
  background-image: none !important; 
  text-decoration: none !important; 
  border: none !important;
}

many thanks, i've messaged with my url