[Resolved] Best way to CSS Custom SVG next to Menu

[Kar Yung]

Goal: To try to mimic as closely as possible the top navigation bar of a site hosted on an e-commerce platform https://facetofacegames.com. Just the BUY / SELL part.

The content site is going to be hosted on WP. Using the svg files I found and just the default WP Nav Label, I am halfway there.

I’m just stumped on how to not make the icon stack on top of the text as well as any additional tips to get it looking as close as possible.

Thanks!

[David]

Hi there,

i am getting a site unsecured notification on your site URL > NET::ERR_CERT_REVOKED
Can you resolve that so i can see the site ?

[Kar Yung]

Seems to be a Firefox only issue but it means there’s something wrong with the server. Thanks for pointing that out.

That’s going to take 24-48 hours to resolve, so I don’t know if I can just show you how it looks like now.

View post on imgur.com

[Tom]

Hi there,

This might help:

#menu-buy-sell-menu li a {
    display: flex;
    align-items: center;
}

#menu-buy-sell-menu li a svg {
    width: 25px;
    margin-right: 10px;
}

Let me know 🙂

[Kar Yung]

You’re a genius Tom. How’d you even arrive at those numbers? From Inspecting the other site or it’s a “guess-timate”?

[Tom]

I used developer tools (right-click + Inspect) to add CSS to the page so I could live preview the values.

Glad I could help! 🙂

[Author]

Posts