html - 在菜单项之间放置 Logo

Question

我想将 Logo 放在导航菜单之间，但我不知道如何在我拥有的主题中执行此操作，因为我在后端找不到它。我确定这只是重新排序或为照片添加边距和空间的问题...在 CSS 的标题部分下面是代码:

#header { padding:0 20px;margin-bottom:8px;}

#logo { float:left; }

#logo { text-transform:capitalize; padding:35px 0; }    
#logo img { max-width:100%; }

#navigation { float:right; margin-right:20px; }

#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:block; position:relative; font-weight:bold; }    
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:block; }   
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }   
#navigation ul li ul li {  min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }  
#navigation ul li ul li:last-child {  border:0;  padding-bottom:0; }    
#navigation ul li ul li a { border:0; display:block; padding:0; }   
#navigation li:hover ul { display:block; }

#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }

#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left:0; display:none; }

Answer 1

我想你正在使用 wordpress 主题？如果是这样，每个里都有自己的类(class)。所以你应该创建一个“空”菜单，并将其添加为该链接的背景，你可以使链接成为主页。您可以使用 text-indent:-9999px 隐藏的文本；

如果你有确切的链接，我会更有帮助，看看我是如何把它拉出来的:http://itsgoran.com/cider

更新:

代码应该是这样的:

li#menu-item-15 {
    background-image: url(http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/SHEISBIDDYmainlogoandslogan1.png);
    width: 470px;
    height: 130px;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

但我建议首先创建较小的 Logo 图像，然后为此使用该图像，当然还要添加较小的宽度和高度，这将是该较小图像的宽度/高度。