SVG Social Media Icon in Menu

[Suraj Katwal]

Let’s say I have an SVG Inline code and Base64 code, can I use those code to insert in the primary menu?
Is it using CSS Class?
I am not able to use it.

Thank You

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[Suraj Katwal]

View post on imgur.com

View post on imgur.com

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.

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj Katwal]

Hi David, Thank you for the easy fix, Can you please help me with CSS?

View post on imgur.com

I want to place a social Icon aligning center with respect to other menu and search Icon.

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[Tom]

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suraj Katwal]

Great!!! Thank You, David and Tom

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[Suraj Katwal]

View post on imgur.com

How to get 2 menus in the same row for mobile devices?

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[Leo]

I currenly only see one icon.

Can you add in the second one?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj Katwal]

Sure, please check

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj Katwal]

Thank you so much for everything.

SEO, WordPress Optimization, Blogging Tutorials.
GeneratePress Tutorial: https://www.wplogout.com

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts