Social Menu in Header?

Hi,

You can choose which menu location to use by going to Appearance → Menus.

Choose custom links added facebook url : https://www.facebook.com/polskafilozofia

in Navigation title copy paste this svg code →

and add to the menu, don’t forget to save.

you should be satisfied with the result

Facebook icon svg

<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg>

Twitter icon svg

<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"></path></svg>

if there is a less dirty method, I am taker

Exemple : https://map.phds9557.odns.fr/

• This reply was modified 3 years, 6 months ago by diagonale.
• This reply was modified 3 years, 6 months ago by diagonale.

Thanks Diagonale, for your reply. I followed your suggestion and added such “icon” code into Custom link into my main horizontal menu on top. I have to say this is the easiest way for sure, but I wouldn’t call it clean, nor actually a solution. It’s rather workaround around Twenty Twenty limitation – actually a hack.
In the WP panel administration, in Menu screen, instead of having a clean Menu item names, now I have this long and ugly html code, which looks awkward. This makes the page hard to maintain in the future, as there is no meaningful information that this thing is actually a Facebook icon or some other social icon.

Can’t I really use the originally designed Social Menu outside of Footer, but have to hack the non-social one??

In the footer-menu-widgets.php I have this code eventually (below), which I can cut out from there (for instance overwrite the file with my own Child theme footer-menu-widgets.php) and put it into the header.php after “<div class=”header-navigation-wrapper”>”. Then I’d need to sort our CSS so it would fit aside, rather then below. I think this should work in practice. This was I’d be able to manage my social menu normally and cleanly in WP Admin panel.
I am just wondering can I do it more efficiently or is it that just Twenty Twenty limitation?
What also is ugly here is that that menu has those classes “footer-social-wrapper”, which would appear in the top Header, which could be confusing for further administration (when after a couple of years somebody would into the code).

<?php if ( $has_social_menu ) { ?>
<nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>" class="footer-social-wrapper">

							<ul class="social-menu footer-social reset-list-style social-icons fill-children-current-color">

								<?php
								wp_nav_menu(
									array(
										'theme_location'  => 'social',
										'container'       => '',
										'container_class' => '',
										'items_wrap'      => '%3$s',
										'menu_id'         => '',
										'menu_class'      => '',
										'depth'           => 1,
										'link_before'     => '<span class="screen-reader-text">',
										'link_after'      => '</span>',
										'fallback_cb'     => '',
									)
								);
								?>

							</ul><!-- .footer-social -->

						</nav><!-- .footer-social-wrapper -->'

• This reply was modified 3 years, 6 months ago by Albatros Desta.
• This reply was modified 3 years, 6 months ago by Albatros Desta.
• This reply was modified 3 years, 6 months ago by Albatros Desta.