I am currently struggling with a frustrating problem where I cannot seem to style the ul list properly. I have tried various solutions, such as using # instead of . when targeting the "socials" class, but nothing seems to work.
Below is my code:
html:
<div class="header-information">
<div class="socials">
<?php
$args = array(
'theme_location' => 'social-menu',
'container' => 'nav',
'container_class' => 'socials',
'container_id' => 'socials',
'link_before' => '<span class="sr-text">',
'link_after' => '</span>'
);
wp_nav_menu($args);
?>
</div> <!--.socials-->
<div class="address">
<p>8000 Zürich, Teststrasse 12 </p>
<p>Telefonnummer: +410 000 00 00 </p>
</div>
</div><!--.header-information-->
css:
.socials.nav ul {
list-style: none;
text-align: center;
padding: 0;
}
@media only screen and (min-width: 768px) {
nav.socials ul {
float: right;
}
}
nav.socials ul li a:before {
font-family: 'Font Awesome 5 Brands';
display: inline-block;
vertical-align: top;
padding: 0 5px;
content: '\f6af';
font-size: 30px;
}