Bu mobil menüyü, WordPress'in ekranın genişliğinin% 50'sini nasıl doldurabilirim?

Question

Özel temamın mobil menüsünün ekranın genişliğinin% 100'ünü doldurmasını sağlamak için "Mobile Navigation" Wordpress Plugin'u yükledikten sonra bir sorunum var. Öyleyse, bu mobil menüyü aşağıdaki ekran gibi genişliğin% 50'sini nasıl doldurabilirim? Daha fazla ayrıntı için mobil menü

.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; } } 

için Buraya

css my development url

Answer 1

Gerçekten için bunları ve çalışma css dışarı incelemek için google chrome kullanmaya başlamak gerekir kontrol edin Kendiniz, aşağıda gerçekten temel şeyler. Alttaki stil sayfanızın alt kısmında yer alması gerekiyor

İki sorun vardır, kırmızı arka plan html'ye uygulanır, bu yüzden bunu kaldırın ve ardından genişlik öğesini istediğiniz yüzde değerine ayarlayın.

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


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