Insert an icon in the header menu [TURBO Theme]

MaxCosta
Trailblazer
152 0 47

Hello everyone,

Here is our current site: https://blush-conceptstore.com/

The megamenus are made with the Globo Mega Menu application but we are currently in the process of switching to Turbo.

Here is the link to the preview of our site under Turbo: https://1dokuy61p3bn020y-1196425333.shopifypreview.com

The last menu item in the Header is a gift icon that redirects to the gift card product page.

I would like to keep the design of our old icon. Because as you can see on the model, I had to put a gift symbol which we don't really like.

Anyone have any idea if it is possible to do this?

Thank you in advance,

0 Likes
Anthony_David_
Trailblazer
221 29 86

I can see the gift icon on the menu is that fixed?

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
Anthony_David_
Trailblazer
221 29 86

it this what you are looking for? I tried on you new turbo theme

Anthony_David__0-1626029341805.png

 

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
MaxCosta
Trailblazer
152 0 47

Hello

Yes it's exactly that I looking for. How I can do it sir ?

Thank you in advance,

Max C.

0 Likes
Anthony_David_
Trailblazer
221 29 86

Hello @MaxCosta ,

Follow the below step:

Step 1:
on theme.liquid add the below code before </head>

<link data-instant-track="" rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" class="gf-style">


Step2: Add the below css on your Styles.css

header a.top_link {
    color: transparent !important;
        border: none !important;
}
a.top_link {
    font-size: 23px!important;
    font-weight: 400!important;
    font-style: normal!important;
    line-height: 18px!important;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a.top_link:before {
    content: "\f06b";
    color: #bf974b!important;
}


Hope this helps

Thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
Anthony_David_
Trailblazer
221 29 86

 hope you accept the solution, if it worked.

I/We are trying to help you but you didn't accept my yesterday's solution too.



Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
MaxCosta
Trailblazer
152 0 47

Regarding yesterday's problem, I answered you because it caused a bug so I was waiting for your answer to validate your solution.

 

Thank you very much, that fixed my problem. However, this causes a bug when loading from page to page. Indeed, the gift icon appears in several places. Like this :

Sans titr100e.png

 

Do you have any idea ?

Thank you in advance,

0 Likes
Anthony_David_
Trailblazer
221 29 86

remove 

a.top_link:before {
    content: "\f06b";
    color: #bf974b!important;
}



Add

.nav.nav--combined.nav--center ul li:last-child a::before {
    content: "\f06b";
    color: #bf974b!important;
}

 

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
MaxCosta
Trailblazer
152 0 47

I think it's perfect.

Thank you so much !!

 

0 Likes
MaxCosta
Trailblazer
152 0 47

You think it's possible to add the blue hover like the other menu items ?

0 Likes