Question

尝试使用css自定义手机菜单，但它不能很好地工作。

WP主题支持并不总是很好，有时候太慢，所以我在这里试了一下。我已经解决了很多问题，但是我无法解决这些问题。尝试了不同的解决方案无济于事。

问题：

滚动时，徽标会短暂停止。（图片添加）但这个问题似乎是其他方面固有的。即使我拿走自定义CSS，原始菜单区域似乎也有相同的行为。（主题支持甚至不承认存在这个问题。）

点击区域与徽标不匹配。（我需要徽标可以点击并作为主页按钮。）

如果您点击徽标旁边的菜单，则会显示菜单。

购物车在下拉菜单中显示两次。我只想要一次。

我宁愿将子菜单作为子菜单，而不是将所有菜单链接放在一行中。

这是代码和结果。任何答案都赞赏。

代码：

header {
    margin: -5px 0 0 0; padding: -5px 0 0 0; !important}
}

header h1 {
    margin: 0
}

html, body {
    margin: 0;
    padding: 0;
}

.wpc-custom-mobile-menu-item .et-cart-info {
    display: block!important;
    margin-left: 0!important;
}
@media only screen and (max-width: 767px) {
.et_header_style_centered .mobile_menu_bar {position: relative; height: 15px;}
.et_header_style_centered .mobile_nav .select_page, .et_header_style_split 
.mobile_nav .select_page {display: none; !important ;}
div#et_top_search {
    margin: -9px auto 0 !important;
}
}

@media (max-width: 980px) {
.mobile_menu_bar:before{
color:#ffffff;
}
.et_header_style_centered #et_top_search {
display: block !important;
float: right !important;
}
.container
{
 margin-top: 15px !important;
  width:98% !important;
}
}
@media (max-width: 980px) {
#et_top_search {
margin: 22px 55px 0 0;
}
}

@media (max-width: 980px) { 
div#et_top_search {
z-index: 99999;
}
.et_search_outer {
display: block !important;
}
.et_header_style_centered #main-header .et_search_outer .container {
max-width: 80% !important;
}
.et_pb_menu_hidden div#et-top-navigation {
opacity: 0;
}
div#et_top_search {
    margin: -8px 11px 0 !important;
}
div#et_mobile_nav_menu {
    margin-top: 0 !important;
    position: relative !important;
    top: -35px;
}

.et_header_style_centered #main-header .mobile_nav {
    background: transparent !important;
}
header#main-header {
    height: 67px;
}

.et_pb_menu_hidden #logo {
    opacity: 0;
}

input.et-search-field {
    top: 0 !important;
}

span.et_close_search_field {
    top: 0 !important;
}
html.js {
    margin-top: auto !important;
}


header#main-header {
    padding: 0 !important;
}

.select_page {
display:none !important;
}

.et_header_style_centered .mobile_menu_bar {
    top: 8px !important;
    left: 5px;
}
}
@media (max-width: 560px) {
div#et_mobile_nav_menu
{
   top: -36px !important;
}
.et_header_style_centered #main-header .mobile_nav {
    padding: 0px 10px !important;
}
div#et_top_search {
    margin: -9px auto 0 !important;
}
#et_top_search {
width:42px !important;
}
}

@media (min-width: 467px, max-width: 560px){
.container {
    margin-top: 15px !important; 
}
}

@media (max-width: 467px){
.container {
    margin-top: 0 !important; 
}

phone menu problem

电话菜单css问题

0 个答案: