Debut theme header customization with CTA button and hover effect

RFQLHSN
Tourist
6 0 4

My website is - https://the-tree-base.myshopify.com/ (main design)

I want to create header like - https://boldcare.in/ (example design)

I am using debut theme.

1. I want navbar from full width to middle, as showing on example design.

2. I want to create same grey background hover effect, as showing on example design. Also removed underline effect.

3. I want to add CTA button, as showing on example design. Should not be effect by hover effect by previous step.

4. I also want same cta button and no underline effect on the mobile menu too.

 

Please help me to customize it properly without hireing a expert. I am just learning here.

Zworthkey
Shopify Partner
204 11 45

hi,

Check out this code in the theme. scss.liquid

 

@media only screen and (min-width: 750px)
.grid__item medium-up--one-half small--hide{
    width: 100%;
}

 

make the width 100%;

I hope it will be helpful for you.

Thank you. 

RFQLHSN
Tourist
6 0 4

Thank your for your worthy reply.

Can you please tell me what this code suppose to do? Can't see any changes.

Zworthkey
Shopify Partner
204 11 45

paste it on the theme. scss.liquid.

thank you

RFQLHSN
Tourist
6 0 4

Already added. Can you see any desire changes?

0 Likes
Zworthkey
Shopify Partner
204 11 45

Add it on theme.css

I think it will be changed.

Thank you

RFQLHSN
Tourist
6 0 4

Already did. Can you please check again and guide me if I am missing something?

Zworthkey
Shopify Partner
204 11 45

Zworthkey_0-1613567328965.png

See this .

Zworthkey
Shopify Partner
204 11 45

Show me the code where you have pasted it.

RFQLHSN
Tourist
6 0 4