我如何使移動菜單填充Wordpress中屏幕寬度的50％？

Question

我安裝"Mobile Navigation" Wordpress Plugin後出現問題，爲我的自定義主題啓用了移動菜單，獲得了100％的屏幕寬度。那麼，如何讓這個移動菜單填充屏幕寬度的50％，如下面的概念？

這裏的CSS移動菜單

.mn-navigation-wrap.mn-dark [class*="icono-"] { 
    color: #000; } 

.mn-icon-wrap { 
    position: relative; 
    padding: 12px; 
    border: 1px solid transparent; 
    display: inline-block; 
    box-sizing: content-box; 
    vertical-align: top; 
    background-color: transparent; 
    margin-bottom: 0; 
    overflow: hidden; 
    float: right; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; } 
    .mn-icon-wrap:hover { 
    cursor: pointer; } 
    .mn-icon-wrap [class*="icono-"], .mn-icon-wrap [class*="icono-"] * { 
    box-sizing: border-box; } 
    .mn-icon-wrap [class*="icono-"] { 
    display: inline-block; 
    vertical-align: middle; 
    position: relative; 
    font-style: normal; 
    color: #fff; 
    text-align: left; 
    text-indent: -9999px; 
    direction: ltr; } 
    .mn-icon-wrap [class*="icono-"]:before, 
    .mn-icon-wrap [class*="icono-"]:after { 
    content: ''; 
    pointer-events: none; } 
    .mn-icon-wrap .icono-cross:before { 
    width: 20px; 
    height: 2px; } 
    .mn-icon-wrap .icono-cross:after { 
    height: 20px; 
    width: 2px; } 
    .mn-icon-wrap .icono-cross:before, 
    .mn-icon-wrap .icono-cross:after { 
    box-shadow: inset 0 0 0 32px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    border-radius: 5px; } 
    .mn-icon-wrap .icono-bars { 
    width: 20px; 
    height: 2px; 
    box-shadow: inset 0 0 0 32px,0 -6px,0 6px; 
    margin: 16px 7px; 
    border-radius: 5px; } 
    .mn-icon-wrap .icono-cross { 
    display: none; 
    width: 30px; 
    height: 30px; 
    margin: 2px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); } 

.mn-navigation-wrap { 
    display: none; 
    max-height: 60px; 
    background: #000; 
    background: #dd3333; 
    overflow: hidden; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 10000; } 
    .mn-navigation-wrap.hidebar { 
    -webkit-transition: max-height 0.3s ease-in-out; 
    -moz-transition: max-height 0.3s ease-in-out; 
    -o-transition: max-height 0.3s ease-in-out; 
    transition: max-height 0.3s ease-in-out; } 
    .mn-navigation-wrap .mn-logo-text { 
    float: left; 
    height: 60px; 
    line-height: 60px; 
    padding-left: 20px; 
    font-size: 24px; } 
    .mn-navigation-wrap .mn-logo-text a { 
     color: #fff; 
     text-decoration: none; 
     font-family: Georgia; 
     font-family: ''; } 
    .mn-navigation-wrap .mn-logo-image { 
    height: 60px; 
    display: block; 
    float: left; 
    padding: 10px 15px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 
    .mn-navigation-wrap .mn-logo-image img { 
     height: 100%; 
     width: auto; } 
    .mn-navigation-wrap .mn-menu-wrap { 
    display: none; 
    font-family: Arial; 
    font-family: ''; } 
    .mn-navigation-wrap .mn-menu-wrap ul { 
     clear: both; 
     padding: 0; 
     margin: 0; } 
    .mn-navigation-wrap .mn-menu-wrap .sub-menu a { 
     padding-left: 50px; } 
    .mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu a { 
     padding-left: 80px; } 
    .mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu .sub-menu a { 
     padding-left: 110px; } 
    .mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu .sub-menu .sub-menu a { 
     padding-left: 140px; } 
    .mn-navigation-wrap .mn-menu-wrap .sub-menu .sub-menu .sub-menu .sub-menu .sub-menu a { 
     padding-left: 170px; } 
    .mn-navigation-wrap .mn-menu-wrap .current-menu-item > a, 
    .mn-navigation-wrap .mn-menu-wrap .current_page_item > a { 
     background: rgba(255, 255, 255, 0.2); } 
    .mn-navigation-wrap .mn-menu-wrap li a { 
     color: rgba(255, 255, 255, 0.8); 
     padding: 10px 20px; 
     display: block; 
     list-style: none; 
     text-decoration: none; 
     line-height: 1.5; } 
     .mn-navigation-wrap .mn-menu-wrap li a:hover { 
     background: rgba(255, 255, 255, 0.3); } 
    .mn-navigation-wrap.mn-dark .mn-logo-text a { 
    color: #000; } 
    .mn-navigation-wrap.mn-dark .mn-menu-wrap li a { 
    color: rgba(0, 0, 0, 0.8); } 
    .mn-navigation-wrap.mn-dark .mn-menu-wrap li a:hover { 
     background: rgba(0, 0, 0, 0.3); } 
    .mn-navigation-wrap.mn-dark .mn-menu-wrap .current-menu-item > a, 
    .mn-navigation-wrap.mn-dark .mn-menu-wrap .current_page_item > a { 
    background: rgba(0, 0, 0, 0.2); } 

@media only screen and (max-width: 500px) { 
    html { 
    padding: 0 !important; 
    margin: 0 !important; 
    margin-top: 60px !important; } 
    html body { 
     padding: 0 !important; 
     margin: 0 !important; } 
    html.mn-open { 
     overflow: hidden !important; 
     background: #000; 
     background: #dd3333; } 
     html.mn-open body { 
     overflow: hidden !important; } 
     html.mn-open .mn-navigation-wrap { 
     top: 0; 
     left: 0; 
     z-index: 10000; 
     height: 100%; 
     max-height: 100%; 
     overflow-y: auto; 
     background: #000; 
     background: #dd3333; } 
     html.mn-open .mn-menu-wrap { 
     display: block; } 
    html .mn-navigation-wrap { 
     display: block; } 
     html .mn-navigation-wrap.hidebar { 
     max-height: 0; } } 

如需更多詳細信息請查看my development url

Answer 1

你真的應該開始使用谷歌Chrome瀏覽器檢查這些事情和工作的CSS出來你自己，下面是非常基本的東西。底部需要進入您的樣式表底部

有兩個問題，紅色背景應用於HTML，所以刪除，然後將寬度元素設置爲所需的百分比值。

@media only screen and (max-width: 700px){ 
    html.mn-open{ 
     background: none; 
    } 


    .mn-navigation-wrap{ 
     width: 50%; 
    } 
}