Wie kann ich das mobile Menü füllen die 50% der Breite des Bildschirms in Wordpress?

Question

Ich habe ein Problem nach der Installation "Mobile Navigation" Wordpress Plugin, um ein mobiles Menü für mein benutzerdefiniertes Thema zu aktivieren, füllte die 100% der Breite des Bildschirms. Also, wie kann ich das mobile Menü füllen die 50% der Breite des Bildschirms wie Konzept unten?

Hier css für mobiles 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; } } 

Für weitere Details lesen Sie bitte my development url

Answer 1

Sie wirklich mit Google Chrome starten sollten diese Dinge und Arbeit css zu inspizieren out für selbst, das unten ist wirklich grundlegende Dinge. Die folgenden Punkte müssen in Ihr Stylesheet unten eingegeben werden

Es gibt zwei Probleme, der rote Hintergrund wird auf HTML angewendet, also entfernen Sie das und setzen Sie dann das width -Element auf den gewünschten Prozentwert.

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


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