标头和导航缩放问题

嗨, 我是wordpress的新手, 我想了解更多信息, 我的老板要求我对网站进行一些修改。他想保留我修改过的满足他要求的27个主题。现在我遇到了一些问题：从931到767的宽度, 导航看起来很混乱。我有一堆css添加了一些尝试修复它：

/*typography changed in stylesheet: ubuntu & raleway*/ body{ font-size:16px; } @media only screen and (max-width: 790px) { body{ font-size:14px; } #masthead .navigation-top .wrap{ z-index:1; position: absolute; width: 100%; } .site-content-contain{ margin-top:1.25em; } }.custom-logo-link, .custom-logo-link img{ max-height: 8em; margin-bottom:1em ; max-width: 100%; height: 8em; width: auto; } .site-title{ text-transform: none; font-weight:800; font-family:ubuntu; font-size:1.875em; }#masthead{ height:40vh; position: relative; box-sizing: border-box; /*border: 5px solid red; */ display:flex; justify-content: center; text-align: center; flex-wrap: wrap; } #custom-header{ position: relative; height: 100%; width: 100%; box-sizing: border-box; /*border: 5px solid green; */ display:flex; text-align: center; flex-wrap: wrap; align-items: center; justify-content: center; } #custom-header .custom-header-media { position: absolute; height: 100%; width: 100%; box-sizing: border-box; /*border: 5px solid blue; */ display:flex; justify-content: center; text-align: center; } #wp-custom-header { outline: 100vh solid rgba(35, 220, 160, 0.6) !important; outline-offset: -100vh; overflow: hidden; position:absolute; height: 100%; width: 100%; box-sizing: border-box; /*border: 5px solid orange; */ display:flex; justify-content: center; text-align: center; } #masthead .site-branding { display: flex; position: relative; box-sizing: border-box; /*border: 5px solid black; */ align-items: center; justify-content: center; padding:unset; /*margin-bottom:2em; */ width:auto; transition:unset; } .site-branding .wrap { display: flex; position: relative; box-sizing: border-box; /*border: 5px solid red; */ align-items: center; justify-content: center; padding:0px; } .site-branding-text { position: relative; box-sizing: border-box; /*border: 5px solid orange; */ align-items: center; justify-content: center; } #custom-header #wp-custom-header img{ position:static; } #canvas{ position:absolute; top:0px; left:0px; } .custom-header-media::before{ background:unset; }#content h1.entry-title{ font-size:1.875em; text-transform: unset; letter-spacing: unset; } .entry-content h1{ font-size:1.5em; } .panel-content .wrap{ padding-top:0.2em } .site-info { display: none; } #main .entry-header{ margin-bottom:1em; } .custom-logo-link{ padding:0; }.col-sm-4 { margin: 0px; padding: 0.8em; }.card { height: 100%; padding: 1em; }#myimg { height: 10em; max-height:10em; width: auto; display: flex; position: relative; align-items: center; justify-content: center; }.card-img-top { padding: 0.2em; width: auto !important; position: relative; max-height:inherit; height:auto; } #mycard{ height: 50%; } .card-body { height: auto; padding: 0%; display:flex; flex-direction:column; } .card-text{ margin:0%; } p:empty { display: none; }#GRC-Card{ padding:0 } #GRC-Card .card-body{ margin:1em; } #GRC-Card .card-header{ background-color:rgb(75, 166, 219); font-weight:800; } /*http://ianlunn.github.io/Hover/*/ .hvr-grow-shadow { vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: box-shadow, transform; transition-property: box-shadow, transform; } .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active { box-shadow: 0 1.25em 1.25em -1em rgba(0, 0, 0, 0.7); -webkit-transform: scale(1.1); transform: scale(1.1); } .navigation-top{ width:100%; position: absolute; bottom: 0; z-index: 3; } .menu-toggle{ width:100%; margin:0.01em; } .menu-toggle:focus{ outline:unset; } .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) #primary{ max-width:100%; } .site-header .navigation-top .menu-scroll-down{ display:none; } .page-one-column .panel-content .wrap{ max-width: 1000px; padding-left: 3em; padding-right: 3em; margin-top:2.25em; } .page:not(.home) #content{ padding-top:2.25em; } #certificates tr{ border-bottom:unset; text-align:center; } .site-content-contain {background-color:rgba(245, 245, 245, 0.5); position: relative; } body.page.twentyseventeen-front-page .entry-title{ display:none; } #colophon{ font-size:1em; line-height:1.5; } .site-footer .widget-area, .widget{ padding:unset; } .menu-toggle, .menu-toggle:hover, .menu-toggle:focus{ background-color:#fff; } /*in global.js comment margin bottom of custom-header on front vs page*/

#1更改填充在媒体查询中(最小宽度：48em), 输出将在单行中。

@media screen and (min-width: 48em) .main-navigation a { padding: 1em 0.7em; }

#2我在style.css第3340行中进行了更改：

@media screen and (min-width: 48em) {

@media screen and (min-width: 50em) {

并且不得不将其更改为50em而不是790px

@media only screen and (max-width: 790px) { body{ font-size:14px; } #masthead .navigation-top .wrap{ z-index:1; position: absolute; width: 100%; } .site-content-contain{ margin-top:1.25em; }}

【标头和导航缩放问题】我认为这不是最好/最干净的解决方案, 但它是可行的。