June 29, 2017 at 12:05 pm
Hey again, dumb question: I can’t get all of my mobile menu items to center.
I have a ton of CSS dictating the mobile menu appearance (which you guys kindly helped me with).
But how do I center the the menu items which are not currently centered (those would be the menu items which have the #333, #db1c22 and #3b5d7e, background colours)
Thanks!
Current CSS:
.container.mobile-dropdown-container, .container.mobile-header-container {
padding: 0;
}
.kad-mobile-nav .kad-nav-inner ul.sf-dropdown-menu.dropdown {
background: #666666;
}
.clearfix.kad-mobile-header-logo {
background: #000;
}
.kad-mobile-nav .kad-nav-inner li ul.sf-dropdown-menu {
margin: 0;
}
.kad-mobile-nav .kad-nav-inner li ul.sf-dropdown-menu a {
list-style: none;
}
.kad-nav-inner .kad-mnav {
padding: 10px 0;
}
.kad-navbtn i.icon-menu {
color: #666666;
}
.kad-mobile-nav .kad-nav-inner li.menu-join a {
background: #db1c22;
}
.kad-mobile-nav .kad-nav-inner li.menu-memberszone a {
background: #3b5d7e;
}
.kad-mobile-nav .kad-nav-inner li a, .nav-trigger-case {
border-bottom: 2px solid #000;
}
.kad-nav-inner .kad-mnav {
padding: 10px 0;
padding-bottom: 0;
margin-bottom: 0;
}
.kad-mobile-nav .kad-nav-inner li ul.sf-dropdown-menu li {
display: inline-block;
}
.kad-mobile-nav .kad-nav-inner li ul.sf-dropdown-menu li a {
border-right: 2px solid #000;
}
.kad-mobile-nav .kad-nav-inner li ul.sf-dropdown-menu li:last-child a {
border-right: 0;
}
.kad-mobile-nav .kad-nav-inner ul.sf-dropdown-menu.dropdown:after {
clear: both;
content: '';
display: table;
}
.kad-mobile-nav .kad-nav-inner li ul.sf-dropdown-menu li {
display: block;
width: 33.33%;
float: left;
text-align: center;
}
.kad-mobile-nav .kad-nav-inner li.menu-classes ul.sf-dropdown-menu li {
width: 50%;
}
.kad-nav-inner .kad-mnav {
padding-top: 0;
}