I'm using the "Future" theme and since it didn't have a dropdown menu, I copied the navigation.html.twig and some CSS from another theme. Now, this works fine for the most part but the menu is not responsive and doesn't appear at all on mobile devices. Can anyone help me adjust it?
The relevant CSS part is below:
CSS
ul.navigation {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
-moz-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.navigation {
vertical-align: middle;
}
.navigation > .has-children:hover > a {
border: 1px solid transparent;
border-bottom-color: #BE5A12;
margin: -1px -1px 0 -1px;
z-index: 1000;
position: relative;
padding-bottom: 1px;
}
ul.navigation {
display: inline-block;
float: right;
}
ul.navigation li {
float: left;
position: relative;
line-height: 3.5em;
}
ul.navigation li a {
font-family: Roboto, sans-serif;
font-size: .8rem;
line-height: 3.5em;
display: inline-block;
padding: 0 1em 0 1em;
-webkit-backface-visibility: hidden;
}
ul.navigation li a:before, ul.navigation li a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
visibility: hidden;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
ul.navigation li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(0.75);
-moz-transform: scaleX(0.75);
-ms-transform: scaleX(0.75);
-o-transform: scaleX(0.75);
transform: scaleX(0.75);
}
ul.navigation li a.active:after {
top: 0;
visibility: visible;
-webkit-transform: scaleX(0.75);
-moz-transform: scaleX(0.75);
-ms-transform: scaleX(0.75);
-o-transform: scaleX(0.75);
transform: scaleX(0.75);
}
ul.navigation li.active a:after {
top: 0;
visibility: visible;
-webkit-transform: scaleX(0.75);
-moz-transform: scaleX(0.75);
-ms-transform: scaleX(0.75);
-o-transform: scaleX(0.75);
transform: scaleX(0.75);
}
ul.navigation li ul {
position: absolute;
background-color: #FFFFFF;
border: 1px solid #DCDCDC;
border-top: 0;
min-width: 12rem;
text-align: center;
z-index: 999;
left: -1px;
display: none;
}
ul.navigation li ul li {
display: block;
float: none
}
ul.navigation li ul li.active > a {
color: #BE5A12;
}
ul.navigation li ul li:hover > a {
color: #BE5A12;
}
ul.navigation li ul li a {
display: block;
margin: auto;
padding: 0 2px 2px 0;
}
ul.navigation li ul li a:after, ul.navigation li ul li a:before {
display: none;
}
ul.navigation li ul ul {
left: 100%;
top: 0px;
}
ul.navigation li:hover > ul {
display: block
}
@media only all and (max-width:59.938em) {
ul.navigation {
display: none;
}
}
.navigation .has-children:hover a {
color: #BE5A12;
}