我有一个有趣的问题,我一直在试图解决过去几天。我创建了一个第二导航菜单,并通过将此代码添加到我的custom_functions.php它添加到论文1.8.5边栏:Wordpress导航菜单图像没有显示在移动Safari中
/* Add second menu to sidebar 1*/
register_nav_menu('secondary', 'Secondary Menu');
function secondary_menu() {
wp_nav_menu(array('container_class' => 'secondary_menu', 'theme_location' => 'secondary' ));
}
add_action('thesis_hook_before_sidebar_1','secondary_menu');
然后我加入这个CSS来custom.css创建菜单项的图标:
/* Menu Container */
.custom .sidebar .menu {
list-style: none;
padding: 0;
margin: 0 0 0 10px;
width: 190px;
height: 190px;
position: relative;
}
/* Submenu Container */
.custom .sidebar .sub-menu {
list-style: none;
padding: 0;
margin: 0;
width: 190px;
height: 45px;
position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: 0px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0 0px;
}
.custom #menu-item-15470 a:hover {
background-position:-83px 0;
}
/* Pinterest */
.custom #menu-item-15471 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 91px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -82px;
}
.custom #menu-item-15471 a:hover {
background-position:-83px -82px;
}
/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: -71px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -165px;
}
.custom #menu-item-15472 a:hover {
background-position:-83px -165px;
}
/* Instagram Submenu Janae */
.custom #menu-item-15473 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 1px;
top: -72px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -331px;
}
.custom #menu-item-15473 a:hover {
position: relative;
left: 1px;
top: -72px;
background-position:-83px -331px;
}
/* Instagram Submenu Billy */
.custom #menu-item-15478 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 1px;
top: -75px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -374px;
}
.custom #menu-item-15478 a:hover {
background-position:-83px -374px;
}
/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 91px;
top: -197px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -248px;
}
.custom #menu-item-15475 a:hover {
background-position:-83px -248px;
}
/* Twitter Submenu Janae*/
.custom #menu-item-15476 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 92px;
top: -198px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -417px;
}
.custom #menu-item-15476 a:hover {
background-position:-83px -417px;
}
/* Twitter Submenu Billy*/
.custom #menu-item-15479 a {
display:block;
height:42px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 92px;
top: -201px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:0px -460px;
}
.custom #menu-item-15479 a:hover {
background-position:-83px -460px;
}
菜单图标在所有浏览器(包括手机浏览器)上都正确显示,但不在移动Safari(仅显示链接)中显示。
它应该如何看:
http://farm9.staticflickr.com/8220/8340444170_7db7385bab_b.jpg
它看起来像什么在移动Safari浏览器:
http://farm9.staticflickr.com/8072/8339388111_7bdc6f50a9_b.jpg
我的工作博客是www.hungryrunnergirl.com如果你想自己检查一下。
任何帮助,将不胜感激。谢谢
它似乎工作正常。我认为你已经解决了吗? – Nick
不,在我的iPhone和iPad上查看时,它仍然给我提供文本链接而不是图像。你从哪个设备查看? – melbill
我正在使用iOS模拟器(官方Apple工具)。我尝试了iPhone和iPad。您遇到缓存问题吗? – Nick