顶级菜单CSS - 具有对齐和链接问题

时间:2017-11-27 17:05:44

标签: html css wordpress menu inline

我正在尝试在菜单上方的顶部栏上方列出联系信息和社交媒体图标(我将从主菜单导航中取出)https://grownowsma.com/

我遇到的三个问题:

1)我无法将辅助顶部栏的全部内容对齐。我希望他们在“Get in touch”区域之上   - 为此我使用了align:right和align-contents:right尝试了各种CSS选择器。没有成功

2)我希望电子邮件和电话号码垂直对齐,以便更好地使用图标。我尝试过各种带有vertical-align:center的选择器。我读过VA只能内联工作,但这是内联的,所以我很难过。

3)如果你点击它打开的Facebook图标,但如果你点击任何其他社交图标,他们不会。我尝试将每个社交图标包装在一起,所以也许分开它们会有所帮助,但由于某种原因没有运气。有关更改HTML以使链接适用于所有四个社交媒体图标的任何想法?

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

1 个答案:

答案 0 :(得分:1)

(仅供参考:这个问题写得不好。我知道这不容易,但你真的应该包含一个你想要做的最小例子。它甚至可能帮助你解决无论哪种方式,在快速浏览之后,我都不能写出我发现的东西,所以这里有一个快速回答。)

只需进行两项更改即可纠正所有三个问题。您的水平对齐问题是因为您的导航设置为col-lg-0(在.row-menu-inner的第一个孩子身上)。这不是全宽导航的正确值。将其更改为col-lg-12。然后,您的其他右对齐规则将起作用。要垂直对齐社交图标,您可以将vertical-align: middle添加到img.alignnone规则。