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
