zurb foundation 6 导航栏（顶部栏）中的用户头像

Question

我在顶栏中有一个用户的头像，但箭头在右边。左边怎么弄？我在任何地方都找不到 css。见图：

使用的代码在 rails 上的 ruby 中：

<li>
  <%= link_to image_tag(current_user.profile.avatar.url(:small), class: "img-circle tiny-img"), "#" %>
  <ul class="menu vertical">
    <li><%= link_to "Edit", edit_user_profile_path(current_user) %></li>
  </ul>
</li>

还有，如何改变箭头的颜色？

Answer 1

您需要为 .is-dropdown-submenu-parent.is-down-arrow>a:before 添加 css 规则并为 .is-dropdown-submenu-parent.is-down-arrow>a:after 修改 css 规则，如下所示：

.is-dropdown-submenu-parent.is-down-arrow>a:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 5px inset;
  border-color: #2199e8 transparent transparent;
  border-top-style: solid;
  border-bottom-width: 0;
  position: relative;
  top: 0.25rem;
  float: left;
  right: 5px;
}

.is-dropdown-submenu-parent.is-down-arrow>a:after {
  display: none;
}

Fiddle Demo

更改 .is-dropdown-submenu-parent.is-down-arrow>a:before 的 top 值以更改箭头的垂直位置。

zurb foundation 6 导航栏（顶部栏）中的用户头像

User avatar in zurb foundation 6 navbar (Top-bar)

html

css

zurb-foundation