Seltsames Problem ... in Safari, Opera, FF, IE getestet und alle scheinen gut - das erste Mal um ehrlich zu sein, ich hatte ein Problem mit Chrome allein!Chrome Problem: Font super in ul li pausen Polsterung
Fundament 6 Rahmen.
In meinem Top-Nav, ein Element hat einen Hintergrund und font awesome Symbol.
Irgendwelche Ideen? Vielen Dank im Voraus.
HTML:
<div class="title-bar">
<div class="title-bar-left">
<span class="title-bar-title"><img src="{$ThemeDir}/images/logoNav.png" alt="$SiteConfig.Title"/></span>
</div>
<div class="title-bar-right">
<ul class="large-horizontal main-menu">
<% loop Menu(1) %>
<li class="menu-item<% if $LinkingMode == "current" || $LinkingMode == "section" %> active<% end_if %>">
<a href="$Link" title="Go to $Title.ATT">$MenuTitle</a>
<% if $Children %>
<ul class="sub-menu">
<% loop $Children %>
<li class="<% if $LinkingMode == "current" || $LinkingMode == "section" %>active<% end_if %>">
<a href="$Link" title="Go to $Title.ATT"> $MenuTitle</a>
</li>
<% end_loop %>
</ul>
<% end_if %>
</li>
<% end_loop %>
<li class="menu-item client-login"><a href="#" class="client-login-button" title="Go go Client Login">Client Login <i class="fa fa-users"></i></a></li>
</ul>
<button class="menu-icon" type="button" data-open="offCanvas"></button>
</div>
</div>
SASS:
// custom menu button
li.menu-item.client-login{
\t position: relative;
\t background-color: rgba(8,79,123,0.7);
\t -webkit-box-shadow: 1px 1px 3px 0 #3b3b3b;
\t padding: 1.2rem;
\t padding-top: 5rem;
\t box-shadow: 1px 1px 3px 0 #3b3b3b;
\t border-radius: 0 0 0.5rem 0.5rem;
\t @include transition(background-color 0.3s ease);
\t &:hover{
\t \t background-color: rgba(8,79,123,1);
\t }
\t a{
\t \t color: #fff;
\t \t font-weight: 600;
\t }
}
.main-menu li.menu-item.client-login a{
\t color: $white;
\t font-weight: 600;
\t &:hover{
\t \t color:$white;
\t } \t
\t
}