The options in customise only allow the menu to follow the logo position. Is there a way of separating them and having both doing completely different things?
This is my domain: www.lsaccountingfirm.com/
I’d like it to look like this: (edited image)
Hi @LSAccounting ,
May this guide will help you edit that:
Just go to online store → themes > edit codes :
Now, let’s take a look at the main Shopify capabilities for the header block customization.
You can choose another menu by pressing on the change button or edit the current menu by pressing the Edit menu button.
you can create new menu items as well as edit the existing ones. You can also use the drop down menu to group products, collections or pages to improve your online store’s navigation. For example, if you have a lot of products, you can add them to collections and use the drop down menu to organize these collections. It will help a customer to find a necessary product type. You can create a drop down menu by creating or moving sub menu items under the main item. The main item will be displayed in your store’s main menu and sub menu items will be displayed in the drop down menu. There can be 2 levels of sub menu sections.
Just go to online store → navigation.
To edit much more details you can visit on this blog : https://belvg.com/blog/shopify-header.html
I hope this helps.
1 Like
Unfortunately, you did not answer my question. My menu is already what I want it to be. I am looking to change the design of the header so the menu appears in the middle of the header (just like in the picture provided) and the logo stays on the left.
What do you actually want to achieve with this? you can share header.liquid code so it can be updated accordingly.
The design will look better? It’s pretty understandable what I was to achieve with this - I want the logo to stay on the left and the menu to be positioned in the middle.
I have attached a picture already with how I want it to look and unfortunately there is no options on there to change both the logo and menu separately. They move together from left to middle.
What do you want me to share? Where do I find it?
This is simply how I want it to look.
Hi, @LSAccounting sorry for my misunderstanding.
You can try this code
- Go to Online Store-> Theme->Edit code
- Asset-> theme.css ->paste the below code at the bottom of the file.
.header__below-left {
margin-left: 30% !important;
width: max-content !important;
background: #00000070 !important;
}
1 Like
Hi @Ahsan_ANC
Unfortunately, that did not work for me. The menu did move but not appear in the middle and also the background behind the menu wasn’t matching the picture that’s already in the header.
Thanks for the try.