Question

虽然我已经使用了wordpress很长一段时间，但在完全透明的精神下，我在编码方面受到限制。我不是从头开始构建的。我使用主题并尽可能地添加自定义。我倾向于尝试和错误，并通过我的方式解决问题，但在2天后没有结果，我以为我会发布。

我目前正在与作者合作更新她的网站（http://www.kerriedroban.com）。她希望她的菜单项“Why Pigs Fly”旁边有飞猪徽标。我能够找到一个插件（https://wordpress.org/plugins/nav-menu-images/），允许从菜单中的图像和字体。但是，你可以看到图像推动“为什么猪飞”低于其他菜单项...我假设因为它与基线而不是中心对齐。

我认为最简单的答案是缩小图像，但我不想让图像变小，因为它不可见。是否有允许它们垂直对齐的代码？

我目前正在使用AIT主题的Arctica主题。根据编辑，它说我应该对style.less.css进行更改。

这是其中包含的菜单信息：

/*** main menu ***/ 
.fixed                      {position:relative;}
#fixedmenu                  {position:fixed; min-width: 1024px; margin-bottom:20px;z-index: 1100;}
#fixedmenu .flags           { position: absolute; top: 18px; right: 30px; padding: 0px; display: block; }
#fixedmenu .flags a         { display: block; float: left; margin-left: 8px; border: 1px solid @linesColor; }
#fixedmenu .flags a.active  { margin-left: 18px; }
#fixedmenu .flags a img     { vertical-align: top; }

.phoneNumber { color: @menusFontColor; margin: 0px; font-size:14px; font-family: @fancyFont;font-weight:normal; }

.mainmenu                               {background: @menuBgColor url("{@menuPattern}")repeat; border-radius: 0 0 7px 7px;  -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.2);position:relative; }
.mainmenu ul                            { list-style-type: none; margin: 0 30px; }
.mainmenu ul:after                      { content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility: hidden; 
.mainmenu ul li                         { margin: 0px 30px 0px 0px; float: left; position: relative;}
.mainmenu > ul > li,
.mainmenu > .menu > ul > li             { line-height: 26px; display: block; }
.mainmenu > ul > li > a,
.mainmenu > .menu > ul > li > a         { font-family: @fancyFont, Arial, sans-serif; text-decoration: none; color: @menusFontColor; font-size: 16px; padding:12px 0 16px 0; position: relative; z-index: 1000; display: block; }
.mainmenu > ul > li > a:hover,
.mainmenu > .menu > ul > li > a:hover   { text-decoration: none; color: @menusFontColor; }
.mainmenu > ul > li.parent:hover > a,
.mainmenu > .menu ul > li.parent:hover > a                  {  }
.mainmenu > ul > li.current_page_item > a,
.mainmenu > ul > li.current_page_parent > a,`
.mainmenu > ul > li.current_page_ancestor > a,
.mainmenu > .menu > ul > li.current_page_item > a,
.mainmenu > .menu > ul > li.current_page_parent > a,
.mainmenu > .menu > ul > li.current_page_ancestor > a       { color: @menusActiveFontColor !important; }
.mainmenu ul ul                     { width: 200px; padding: 1px 1px 1px 1px; display: none; position: absolute;  top: 45px; left: 0px; margin: 0; background: #fff; border:2px solid #eee;border-top: 12px solid #eee;border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); }
.mainmenu li li                     { width: 200px; height: 25px; float: none; font-size: 13px; line-height: 18px; margin: 0px; padding: 0px 5px 0px 0px; position: relative; }
.mainmenu li li a                   { display: block; padding: 3px 7px 3px 7px; background: none; color: #666666; text-decoration: none; }
.mainmenu li ul > li:hover > a      { background: #eee; color: #000000; text-decoration: none;}
.mainmenu ul ul ul                  { position: absolute; top: -13px; left: 204px; }

任何帮助或指导将不胜感激。谢谢！

Answer 1

为什么不在WordPress中附加自定义类并将背景图像添加到此类？

将此添加到您的CSS：

.pig:before {
    content: '';
    display: inline-block;
    width: 35px;
    height: 25px;
    background: url('http://kerriedroban.com/wp-content/uploads/2015/08/red-pig-small-e1440441375424.png') no-repeat center bottom;
}
.pig a {
    display: inline-block !important;
}

将pig类添加到所需的菜单项。

图像和字体菜单垂直对齐

1 个答案: