Question

我试着将社交图标添加到导航菜单中。我已完成以下步骤：

添加新的导航链接
Css类示例＆＃34; menu-twitter＆＃34;
在子主题文件夹中创建一个mapp＆＃34; images＆＃34;
导入的twitter.png

将以下代码添加到style.css

.menu-facebook {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}

.menu-facebook a:hoover {
    background: #f5f5f5 !important;
}

.menu-twitter {
    text-indent: -9999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}

.menu-instagram {
    text-indent: -9999px;
    background-image: url(images/instagram.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}

.menu-instagram a:hoover {
    background: #f5f5f5;
}

查看我的网站hkochd.suplife.se

我无法点击它，它的位置非常奇怪，我做错了什么？

*抱歉英语不好。

Answer 1

此处的问题是，链接与<a>标记内的<li>标记相关联。通过您的代码，您可以将页面缩进页面。

为避免这种情况，您可以将css应用于<a>标记，而不是<li>标记。

以下是修改后的代码

.menu-facebook a {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-facebook a:hover {
    background: #f5f5f5 !important;
}
.menu-twitter a {
    text-indent: -9999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-instagram a {
    text-indent: -9999px;
    background-image: url(images/instagram.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-instagram a:hover {
    background: #f5f5f5;
}

Answer 2

你还需要改变你

.a:hoover {

为：

.a:hover {

让这些元素在悬停时真正改变背景颜色。祝你的网站好运！

Wordpress Twenty Twelve - 导航菜单中的社会图标

2 个答案: