How to turn one main menu item into a button

Solved
Highlighted
New Member
5 0 0

How do I turn one of the main menu buttons into a CTA with a different background color? Thank you

0 Likes
Highlighted

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

leannako.com --- brooklyn theme

0 Likes
Highlighted

Success.

Shopify Partner
1206 162 329

You can put this in the bottom of your theme.scss.liquid file in your assets folder:

 

.site-header nav ul.site-nav li:nth-child(2) {
    background-color: #f5c7ce;
    box-shadow: 2px 2px 10px rgba(0,0,0,.8);
}

Where 2 after nth:child is whatever link item you want to edit. For instance if you wanted to edit headbands it would be 1, Mommy Me 4, etc etc. I just added the box shadow, you can just delete that if you want.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
5 0 0

Thank you so much!

0 Likes
Highlighted

hi @Ninthony  ! I had a go with your code as well but it did not work unfortunately. Would you know what needs to be changed for this website https://dwwindowsystems.co.nz/pages/request-a-quote  I put in below code (link number and color code changed)

 

.site-header nav ul.site-nav li:nth-child(9) {
    background-color: #053E52;
    box-shadow: 2px 2px 10px rgba(0,0,0,.8);
}

Thank you so much!

0 Likes
Highlighted
Shopify Partner
1206 162 329

If you wanted to change the styles of your "Range" link, you'd use this:

 

ul.nav li:nth-child(3) {
    background-color: 
    #003e52;color: 
    white;
    }
ul.nav li:nth-child(3) a {
    color: white;
}

Where 3 is the 3rd link from the left. So change that number accordingly to whatever link you want to change.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted

Thank you, that's looking pretty good already! It just turns to white when I hover over it. Is there something I can do to change that? And would it be possible to have this button on the far right side of the page?

Thanks so much!

0 Likes
Shopify Partner
1206 162 329

You can change the code I provided to this and it'll give you a hover effect:

 

ul.nav li:nth-child(3) {
    background-color: #003e52;
    color: white;
    }
    ul.nav li:nth-child(3):hover a{
    color: #003e52;
    background-color:#b9b9b9
    }
ul.nav li:nth-child(3) a {
    color: white;
    transition: color .2s ease-in-out
}

I'm not sure what you mean by aligning it to the right of the page. You mean just one of your links aligned to the right? That can be done but it would require changing the structure of your code. If you're not familiar with that I'd suggest hiring an expert.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted

Thanks so much, I've pasted in the code but the same thing happens: https://recordit.co/mMR5QoCXzT

0 Likes