Change mobile button to "back" button

Hello fantastic people,
Currently I have a burger menu icon appearing on mobile screens. Is there a way to convert this to a “back” button? ie in place of the mobile button, it is just a button with the purpose of bringing the customer to the previous page that was viewed?

Appreciate any suggestions that you may have.

Hi @iamwithU,

Thanks for reaching out.
You can’t change the Burger menu or replace it with the Back button while using the default header. But if you are using the customized header build through the Header Builder, you can add a Button element on the smaller screen and add the following code into the URL attribute.

javascript:history.back();

Hope it helps.
Thanks

1 Like

You’re brilliant, @tristup! Thank you so much.

I set up the button as advised by you. If you look at the screenshot, you’ll see that the 2nd image is centralized. How do I get it to stick side by side to the 1st image? It is supposed to go hand in hand to accompany the logo.

I also like 2 buttons to be close to each other and positioned towards the right edge.

You may happen notice that I have 2 white bands of empty space on both the right and left sides on the bigger screens. How do I get rid of that white space, and expand the whole page to fill up the screen?

Appreciate your patient guidance!

Hello @iamwithU,

Go to Cornerstone > Theme Options > Layout and Design and then select “Fullwidth” for the Site Layout.

This setting will eliminate the borders on the left and right of the page. If you want to expand the content area, you will have to go to Cornerstone > Layout Builder and create a WC Single layout which you can use as your single product layout wherein you can set it as wide as the browser screen. If you are not familiar with the builder yet, please check out this documentation:

Best Regards.

Thank you @ruenel for that great tip. I’ll go try it out.

What about the spacing of the images and buttons on the customized header - where do I go to adjust them? I like the 2 images to be close together and positioned towards the left side. And 2 buttons close together and located towards the right edge.
Look forward to hearing from you.

Hi @iamwithU,

I have checked your header, and found that you are using only one Container inside the Bar. I would suggest you use two different Container and set the Design > Flexbox > Horizontal alignment to Start for the 1st Container and End for the 2nd Container.

Screenshot-2022-08-11-163857

Screenshot-2022-08-11-164105

Hope it helps.
Thanks

Yes, it does. Fabulous, @tristup! You’re so helpful. Thanks for the beautiful tips :slight_smile:

You are most welcome @iamwithU

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.