当前位置: 首页 > 知识库问答 >
问题:

LI的Wordpress菜单类。当前菜单项未应用

赖绪
2023-03-14

我正在为客户创建一个Wordpress站点,网址是http://digitaldemo.net/vintage/about/。我遇到的唯一问题是,当我在给定的页面上时,li.current-menu-item类没有被应用。

例如,在上面的URL上,关于菜单项应该有更深的灰色背景,而不是图标后面的白色“聚光灯”。

下面是我的导航的CSS:

/* Navigation */

.topnav {
    width:960px ;
    position:absolute ;
    top:0 ;
    left:0 ;
    z-index:5000 ;
    text-align:center ;
}

ul.menu {
    margin-left:0 ;
    padding-left:0 ;
    list-style-type:none ;
}

.menu li {
    display:inline-block ;
}

.menu li {
    margin:0px 12px 12px 12px ;
    height:130px ;
    width:130px ;
}

.menu li a {
    font-family:ParkLaneNF ;
    color:#000000 ;
    font-size:20px ;
    font-weight:normal ;
    text-align:center ;
    text-decoration:none ;
    text-shadow:1px 1px 3px #333333 ;
    display:inline-block ;
    line-height:130px ;
    height:76px ;
    width:130px ;
    padding-top:54px ;
}

.menu li.home {
    background:url("images/homepage-icon.png") no-repeat center ;
}

.menu li.home:hover, .menu li.home .current_page_item {
    background:url("images/homepage-icon-over.png") no-repeat center ;
}


.menu li.blog {
    background:url("images/blog-icon.png") no-repeat center ;
}

.menu li.blog:hover, .menu li.blog .current-menu-item {
    background:url("images/blog-icon-over.png") no-repeat center ;
}


.menu li.store {
    background:url("images/store-icon.png") no-repeat center ;
}

.menu li.store:hover, .menu li.store .current_page_item {
    background:url("images/store-icon-over.png") no-repeat center ;
}

.menu li.about {
    background:url("images/about-icon.png") no-repeat center ;
}

.menu li.about:hover, .menu li.about .current-page-item {
    background:url("images/about-icon-over.png") no-repeat center ;
}


.menu li.contact {
    background:url("images/contact-icon.png") no-repeat center ;
}

.menu li.contact:hover, .menu li.contact current-menu-item {
    background:url("images/contact-icon-over.png") no-repeat center ;
}

每个li都有一个独特的背景图像(例如li.blog有blog图标和聚光灯,li.about有about图标和聚光灯,等等)

如果有人能帮我解决这个问题,我会非常感激的。

最好的,

辛西娅

共有1个答案

狄宪
2023-03-14

你的选择器是错误的。

要使用类current-menu-item选择您的LI,您需要使其不带空格:

li.about.current-menu-item { ... }

而且名字也让人摸不着头脑

current-page-item 

而且

current_page_item

为了你好把这些换掉。

 类似资料:
  • 我有一个WordPress菜单,其中有一些菜单项是我通过标准(拖放)WordPress管理菜单功能添加的。最近,我不得不在菜单中添加另一项,以生成动态href链接。我在函数中使用以下代码实现了这一点。php文件: //将“我的个人资料”菜单项动态添加到“成员”菜单(根据当前登录的用户生成用户名) add_filter(wp_nav_menu_items、add_profilelink_in_men

  • 我在wordpress中为buddypress创建了一个自定义菜单。 链接始终包含当前用户。在本例中,用户"admin /成员/管理员/个人资料/ 我必须做什么才能使链接始终指向当前用户?

  • 你好,我想在这个代码的帮助 函数register_my_custom_menu_page(){add_menu_page('custom menu title','custom menu','my-menu-slug2','manage_options','custompage','my_custom_menu_page',plugins_url('myplugin/images/icon.png

  • 我有一个基于WordPress的网站,我的主题通过添加“当前菜单项”类来突出当前菜单项。 问题是,我有一个包含3个子菜单项的菜单项,它们都指向具有不同容器ID的相同页面(它们的href包含容器ID),因此它们都被突出显示。 如何仅突出显示href指向当前查看的容器的菜单项? 我尝试了这个答案,在标签后面插入了以下内容:

  • 我正在创建一个wordpress模板,目前我正在制作菜单,我已经制作了以下内容: http://jsfidle.net/skunheal/umkyr/ 有两个小问题,我不知道如何解决。Wordpress为当前活动的菜单项提供class.current_page_item。我该怎么做呢? 我想的是: 普通菜单项: 活动菜单项: 但似乎不起作用。有人知道为什么吗? 谢谢你,梅里恩

  • 我想在下面的网站主菜单的全宽度。它在wordpress中。我不确定在自定义css中编辑哪个元素。谢谢 主菜单图像: