Navigation menu is too big on smaller resolution in Site Design & Styles Posted January 8, 2023 As seen in the attached images one screen (smaller) creates three row stacked navigation menu but on the larger resolution it's perfect. What can I do to fix this so it's consistent throughout larger and smaller displays? This is my code for my navigation: @media only screen and (min-width: 640px) and (max-width: 1500px) { a{ width:80%; margin:auto} } .header-nav-folder-title { height: 30px; } .header-nav-item { padding: 12px 16px; } * { box-sizing: border-box; } .header-nav-item--active a{ background: unset !important; } .header-nav-item--hover a{ background: unset !important; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: center !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: #fff !important; position: absolute; padding-left: 155px; margin-top: 10px; } .header-nav-item { margin: 0; padding: 0; list-style: none; overflow: hidden; } //STYLING AROUND DROPDOWN .header-nav-folder-content { padding-top: 5px !important; padding: 2px 10px; border: 1px solid #979997; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .header-nav-item:hover{ overflow: visible; } .header-nav-folder-item-content { position: relative; background-color: #fff; } .header-nav-folder-item-content:hover { color:#AFAFAF !important; } .header-nav-folder-item-content { display: block; padding: 7px 6px; color: black; text-decoration: none; text-align: center; } // END OF NAVIGATION STYLING
Navigation menu is too big on smaller resolution
in Site Design & Styles
Posted
As seen in the attached images one screen (smaller) creates three row stacked navigation menu but on the larger resolution it's perfect. What can I do to fix this so it's consistent throughout larger and smaller displays?
This is my code for my navigation:
@media only screen and (min-width: 640px) and (max-width: 1500px) { a{ width:80%; margin:auto} } .header-nav-folder-title { height: 30px; } .header-nav-item { padding: 12px 16px; } * { box-sizing: border-box; } .header-nav-item--active a{ background: unset !important; } .header-nav-item--hover a{ background: unset !important; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: center !important; position: absolute; left: 50% !important; right: unset !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: #fff !important; position: absolute; padding-left: 155px; margin-top: 10px; } .header-nav-item { margin: 0; padding: 0; list-style: none; overflow: hidden; } //STYLING AROUND DROPDOWN .header-nav-folder-content { padding-top: 5px !important; padding: 2px 10px; border: 1px solid #979997; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .header-nav-item:hover{ overflow: visible; } .header-nav-folder-item-content { position: relative; background-color: #fff; } .header-nav-folder-item-content:hover { color:#AFAFAF !important; } .header-nav-folder-item-content { display: block; padding: 7px 6px; color: black; text-decoration: none; text-align: center; } // END OF NAVIGATION STYLING