stephensargon Posted January 8 Share Posted January 8 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 Link to comment
tuanphan Posted January 13 Share Posted January 13 You can consider forcing burger menu icon appears on smaller resolution. What do you think? We can check & give the code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment