[Resolved] Put Icon inside navigation

[Jim]

Hi. I found this SVG link in a certain website which shows a mail icon. In that site, it was an anchor link for a popup form. I am planning to replicate that with my site and style it with CSS, but I would like to know how to hook it after the search icon in both desktop and mobile. I use navigation as header for desktop. How would I hook the icon as suggested? Thanks in advance.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 564.8 490" style="enable-background:new 0 0 564.8 490;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FF2842;}
	.st1{fill:#FFFFFF;}
</style>
<path d="M464,64H48C21.5,64,0,85.5,0,112v288c0,26.5,21.5,48,48,48h416c26.5,0,48-21.5,48-48V112C512,85.5,490.5,64,464,64z
	 M464,112v40.8c-22.4,18.3-58.2,46.7-134.6,106.5c-16.8,13.2-50.2,45.1-73.4,44.7c-23.2,0.4-56.6-31.5-73.4-44.7
	C106.2,199.5,70.4,171.1,48,152.8V112H464z M48,400V214.4c22.9,18.3,55.4,43.9,104.9,82.6c21.9,17.2,60.1,55.2,103.1,55
	c42.7,0.2,80.5-37.2,103.1-54.9c49.5-38.8,82-64.4,104.9-82.7V400H48z"/>
<circle class="st0" cx="419.1" cy="145.6" r="141.4"/>
<g>
	<path class="st1" d="M422.3,58.3h18.8v174.6h-24.9V95.7h-18.8V77.1C407.7,73.2,417.4,67.8,422.3,58.3z"/>
</g>
</svg>

[David]

Hi there,

You can use

inside-navigation and inside_mobile_meni_bar hooks

It will require a little CSS to position them.

[Jim]

Okay. I cannot get it to show on the front end using inside-navigation hook. Tried several hooks. Not sure why. Here it is https://svgshare.com/s/Ecb. Maybe you can try in a test site and advise me what do do. Thanks. (I want it inline so it adapts to the colour of the GP icons.

[David]

First off you won’t be able to get the SVG to grab the GP styles for coloring.
Try this for the Primary Navigation ie. inside-navigation hook.

Add a <a> tag around your SVG like so:

<a href="url" class="nav-mail-icon">
<!-- Add your SVG in here -->
</a>

Now we add a flex to the inside nav to get the icon in line with the menu items.
We can then target the Icon with the class we added to our <a> tag. With this CSS:

@media(min-width: 768px) {
    .main-navigation .inside-navigation {
        display: flex;
        align-items: center
    }

    .nav-mail-icon svg {
        height: 30px;
        order: 100;
    }
}

[Jim]

Thanks a lot. I created a test page and edited the link in the original post so you can view it. I also hooked in the mobile menu bar as well for the same page. You can check it and advise how to position it further because on the desktop it shows before site name. (I will assign the popup link later. Thanks)
NB: My mobile navigation begins at 900px.

[David]

You’re limited to where you can place it but easy to do with the flex order property:

1. Before Menu Items:

.nav-mail-icon {
    order: 2;
}

2. After Menu Items:

.nav-mail-icon {
    order: 10;
}

[Jim]

Thanks. I needed that order in the CSS. Figured out the rest through google and now the button can toggle using some HTML and some vanilla JS. You can check it out through the updated link and maybe advise if there is anything else I could do to it.

[David]

Looks great to me!

[Jim]

Great! Thanks again.

[David]

Glad to be of help

[Author]

Posts