Top Menü CSS - mit Ausrichtung und Verknüpfung Probleme

Question

Ich versuche, eine obere Leiste auf dieser Website über das Menü, das die Kontaktinformationen und die Social Media Icons (ich werde sie aus dem Hauptmenü nav) https://grownowsma.com/

Die drei Ausgaben, die ich habe:

1) Ich kann nicht den gesamten Inhalt der sekundären oberen Leiste, um richtig auszurichten. Ich will sie über dem Bereich "In Kontakt kommen" - Dafür habe ich verschiedene CSS-Selektoren ausprobiert mit dem align: right und align-contents: right; kein Erfolg

2) Ich möchte, dass die E-Mail- und Telefonnummern vertikal ausgerichtet sind, damit sie besser mit den Symbolen aussehen. Ich habe verschiedene Selektoren mit Vertical-Align: Center ausprobiert. Ich habe gelesen, dass VA nur inline funktioniert, aber das ist inline, also bin ich ratlos.

3) Wenn Sie auf das Facebook-Symbol klicken, wird es geöffnet, aber wenn Sie auf eines der anderen sozialen Symbole klicken, geschieht dies nicht. Ich habe versucht, jedes soziale Symbol in einem so zu verpacken, dass es vielleicht hilfreich wäre, sie zu trennen, aber aus irgendeinem Grund kein Glück. Irgendwelche Ideen zum Ändern des HTML, um die Links auf allen vier Social-Media-Icons funktionieren zu lassen?

<p style="text-align: right; font-family: 'Muli'; vertical-align: center;"> 
 
    <a href="mailto:josh@grownowsma.com">josh@grownowsma.com</a> | <em><a 
 
     href="tel:(978)%20857-4349" target="_blank" rel="noopener">978-857- 
 
    4349 </a> | </em><span><a href="https://www.facebook.com/Grow-Now-Social- 
 
     Media-Agency-1275074409247860/" target="_blank" rel="noopener"><img 
 
     class="alignnone wp-image-520" src="https://grownowsma.com/wp- 
 
     content/uploads/2017/11/facebook.png" alt="" width="25" height="25" /> </a> 
 
    </span><span><a href="https://twitter.com/grownowsma" target="_blank" 
 
     rel="noopener"><img class="alignnone wp-image-519" 
 
     src="https://grownowsma.com/wp-content/uploads/2017/11/twitter.png" alt="" 
 
     width="25" height="25" /></a></span><span> <a 
 
     href="https://www.instagram.com/grownowsma/" target="_blank" 
 
     rel="noopener"> </a><a href="https://www.instagram.com/grownowsma/" 
 
     target="_blank" rel="noopener"><img class="alignnone wp-image-521" 
 
     src="https://grownowsma.com/wp-content/uploads/2017/11/instagram.png" alt="" 
 
     width="25" height="25" /> </a></span><span><a 
 
     href="https://www.linkedin.com/company/11331850/" target="_blank" 
 
     rel="noopener"><img class="alignnone wp-image-518" 
 
     src="https://grownowsma.com/wp-content/uploads/2017/11/linkedin.png" alt="" 
 
     width="25" height="25" /></a></span> 
 
</p>

Answer 1

Sie müssen diese Klasse mit CSS col-lg-0 middle-col-lg-12 oder Stil .row-menu-inner .col-lg-0.middle{ width: 100%; float: none;} Ich bin

Answer 2

(FYI:. Diese Frage schlecht geschrieben ist, weiß ich es nicht einfach sein würde, aber man wirklich ein minimales Beispiel enthalten sein sollte, was Sie versuchen, es zu tun. Vielleicht haben Sie sogar geholfen, es selbst zu lösen. So oder so, nachdem ich einen kurzen Blick darauf geworfen habe, kann ich nicht einfach schreiben, was ich gefunden habe, also hier ist eine schnelle Antwort.)

Alle drei Probleme sollten korrigierbar sein mit nur zwei Änderungen. Ihr Problem mit der horizontalen Ausrichtung liegt darin, dass Sie Ihr Nav auf col-lg-0 (auf dem ersten ersten Kind von .row-menu-inner) festgelegt haben. Dies ist nicht der richtige Wert für ein Navi mit voller Breite. Ändern Sie es in col-lg-12. Ihre anderen richtigen Ausrichtungsregeln funktionieren dann. Um die sozialen Symbole vertikal auszurichten, können Sie vertical-align: middle zu Ihrer img.alignnone Regel hinzufügen.