header menu label placement in shopify

[Samuele]

Hello everyone.

I have this website where i want to adjust some things in the header you know the header of the website, where there is the labels Home, Shop etc... And i have like 5 categories of those but theres one category i want to move to the other side of the header like beside the cart icon. I can provide a picture to showcase my thinking.

Can you see how i want it the "OUR INITIATIVE" beside the cart icon but i can seem to figure it out in all this coding. and i would like in the "OUR INITIATIVE" it would be nice to have a litte square black box on the "OUR INITIATIVE" with white text font of course only on that font text not the other categories. you should still be able to click it and redirect to the page u feel me.

I can provide a example from a other website too. screenshots following.

i would like the button positions like shown on the blm website, so all the 4 other labels stay untouched and the "OUR INITIATIVE" is in a black box with white font text, standing beside the cart icon.

And on the mobile i would like to have it the same way in the screenshot provided:

i would like the label button "OUR INITIATIVE" with a black square button, with white text font, under all the under labels when opening the menu on mobile or does it  automatically do it on mobile when you do it on the desktop version? 

Hope somebody could help would be very appreciating🙏

Shopify URL: https://5fbdaf-b7.myshopify.com/

[DitalTek]

@Samuele 

To achieve that, you should be customize with code.

First create a setting field on header section with type url, then you need to go to header file on sections folder find to place handle show cart icon and make the url created show here.

You can also make same way on mobile.

And if not familiar with code, you should be ask a developer to do it. I think it not spend more time to handle.

[Sweans]

Hi @Samuele ,

First remove "OUR INITIATIVE" from the Navigation Menu as your first screenshot
then
Open the header.liquid file located in the Layout folder.
Locate the code for the cart icon. It might look like this:

Then, paste the following code before the above code:

<a id="HeaderMenu-our-initiative" href="/pages/our-initiative" style="cursor: pointer;">
<span>OUR INITIATIVE</span>
</a>

paste the following code on base.css
code:
#HeaderMenu-our-initiative {
background-color: #000;
color: white;
padding: 10px;
border-radius: 4px;
}


@media (max-width: 768px) {
#HeaderMenu-our-initiative {
display: block;
margin: 10px 0;
}

}

and save the code.

I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!

Regards,
Sweans

[Samuele]

Hey,

i appreciate for reaching out and helping tho i am not entirely sure i done it correctly. It seems to be i got the text and all that beside the cart icon though its a link url with blue font color, and it doesnt have like a black box beside it, and also the size of font is a bit bigger than the others. Some screenshots following:

you can probably see i got the my thought of placement and how it need to be done, though you can see it doesnt have that black box, on it and, the text is quite bigger than the other labels. Maybe i forgot to mention it needs to be 12px font size thats on me.

Im not sure i pasted the following first code u gave me up above  the cart icon codes - Screenshots following:

As you can see i pasted the first code above the cart icon codes, or have i done some wrong here? also i am not too sure, when you explained, the base.css code i am not too sure where to exactly paste that code into the file, like where is it located, where i should post it? screenshots following:

Here is the code for the base.css, but i just pasted it at the bottom of the file, and idk is there a exact location in that file i should paste it? cuz i just pasted it at the bottom. Also there is 2 "OUR INITIATIVE", and i would only like it to be 1 right, so do i change anything in the navigation menu inside, shopify where all my other labels are? like the basic labels you can just add? the link and redirecting works perfectly, so that is also how it need to be. anyways thank you for your reachment and i hope you can help me further with this, because it seems i done it correct, but there are some bit issues regarding the box, link, text and color font, placement and the 2 "OUR INITIATIVE. Also sorry for my english not my first language, so like the commas and everything might be wrong its different in my language. Thanks again!