SVG Social Media Icon in Menu

https://imgur.com/a/uyOLyP3
https://imgur.com/a/svl0DMx

Here is an update but couldn't fix it.

I don't want to use any Icon fonts or font awesome so, I am trying SVG icon by myself.

Hi there,

the Navigation Label filed will accept most HTML - so you can add your inline SVG directly to the code.

If you want to add it as a background then i would target the menu items <a> element. And apply the background image to that.

Hi David, Thank you for the easy fix, Can you please help me with CSS?
https://i.imgur.com/1VxfWxW.png
I want to place a social Icon aligning center with respect to other menu and search Icon.

You can give that menu item a class, then do this:

.my-icon-menu-item-class svg {
    position: relative;
    top: 5px;
}

Great!!! Thank You, David and Tom

https://i.imgur.com/bc2tjM1.png
How to get 2 menus in the same row for mobile devices?

I currenly only see one icon.

Can you add in the second one?

Sure, please check

Try this CSS:

#mobile-header.toggled .main-nav>ul {
    display: flex;
    flex-wrap: wrap;
}

#mobile-header.toggled .main-nav>ul li {
    flex: 1 0 100%;
}

#mobile-header.toggled .main-nav>ul li:nth-last-child(-n+3) {
    flex: 0 0 auto;
}

Thank you so much for everything.

You're welcome