How to change the nav menu style to look like buttons

Solved
New Member
42 0 0

Im kind of new to shopify and coding but i wanted to know how i can change the style of the nav menu bar to look like buttons. ill post a gif image of what im looking to acheive, the buttons include a transition . My theme is Debut btw.

 

Many thanks.

 

ezgif-6-f0f805ec9595.gif

0 Likes

Hello @MSY92,

Please add below css in theme.scss

#SiteNav li:first-child {
	border: 1px solid green;
}
#SiteNav li:first-child {
	border: 1px solid green;
}

Please share your site url so that I will give you exact solution

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 Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Partner
1141 93 139

Please Share a Store url to better assist.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
42 0 0

My website is moochimoochi.com 

 

 

Many thanks!

0 Likes

Success.

@MSY92,

For first menu add below css

#SiteNav li:first-child {
	border: 1px solid #f267a5;
}
#SiteNav li:first-child:hover {
background: #f267a5;
} #SiteNav li:first-child:hover a { color: #fff; }

For 2nd menu add below css

#SiteNav li:nth-child(2) {
	border: 1px solid #f267a5;
}
#SiteNav li:nth-child(2):hover {
	background: #f267a5;
}
#SiteNav li:nth-child(2):hover a {
	color: #fff;
}

For 3rd menu

#SiteNav li:nth-child(3) {
	border: 1px solid #f267a5;
}
#SiteNav li:nth-child(3):hover {
	background: #f267a5;
}
#SiteNav li:nth-child(3):hover a {
	color: #fff;
}

Note:Please change color as per your requirement

 

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 Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
42 0 0

Thanks for your quick reply @oscprofessional , i wanted to know where i need put this code inside theme.scss

 

 

Many thanks!

0 Likes

Yes in theme.scss

But please change color as per your requirement

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 Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
42 0 0

Thank you @oscprofessional it worked wonderfully!

 

Many thanks!

 

ezgif-6-efe66db30a2c.gif

0 Likes