I am having the hardest time trying to align menu items vertically. I’ve tried using flexbox. I can get the menu items to be equal heights but that stubborn menu item text will not move.
Here’s the base CSS I have for the menu (felxbox removed)
@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-color: #0A4972;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-color: rgba(255, 255, 255, 0);
}
@media (min-width:768px) {
.navbar-nav>li {
color: white;
}
}
.navbar-default .navbar-nav>li>a {
color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
color: #ECEC1E;
background-color: rgba(255, 255, 255, 0);
}
.dropdown-menu {
background-color: white;
border: 1px solid #cccccc;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 10px;
color: #ECEC1E;
}
.dropdown-menu>li>a {
color: #ECEC1E;
}
.dropdown-menu>li>a:hover {
color: #ECEC1E;
background-color: rgba(255, 255, 255, 0);
}