I am trying to make a top bar on this website above the menu that lists the contact information and the social media icons (I will take them out of the main menu nav) https://grownowsma.com/
The three issues I'm having:
1) I can't get the whole content of the secondary top bar to align right. I want them above the "Get in touch" area - For this I've tried various CSS selectors using the align: right and align-contents: right; no success
2) I want the email and phone number to be vertically aligned to look better with the icons. I've tried various selectors with vertical-align: center. I read that VA only works inline, but this is inline so I'm stumped.
3) If you click on the Facebook icon it opens, but if you click on any of the other social icons they don't. I tried wrapping each social icon in a so maybe separating them would help, but for some reason no luck. Any ideas on changing the HTML to make the links work on all four social media icons?
<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>You need to change this class col-lg-0 middle to col-lg-12 , or style it with css .row-menu-inner .col-lg-0.middle{ width: 100%; float: none;}