Hi there!
After hours trying to figure that one out - I am stuck! Any help would be appreciated. Thanks in advance
So I have a website using colorlib-nav and the mobile menu doesn’t have any spacing between menu items. It would look just fine for text but I added some icons and would like to add some spacing between items.
I tried editing a bunch of stuff but it seems I really don’t know what I’m doing at that point… haha. Thanks in advance.
Here is the whole nav code and a preview of what I am talking about:
.colorlib-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto; }
@media screen and (max-width: 768px) {
.colorlib-nav {
margin: 0; } }
.colorlib-nav .top-menu {
padding: 40px 30px; }
@media screen and (max-width: 768px) {
.colorlib-nav .top-menu {
padding: 28px 1em; } }
.colorlib-nav #colorlib-logo {
font-size: 24px;
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: 900; }
.colorlib-nav #colorlib-logo a {
position: relative;
color: #fff; }
.colorlib-nav #colorlib-logo a i {
color: #ecca57; }
@media screen and (max-width: 768px) {
.colorlib-nav .menu-1 {
display: none;
}
}
.colorlib-nav ul {
padding: 0;
margin: 8px 0 0 0; }
.colorlib-nav ul li {
list-style: none;
display: inline;
font-weight: 400;
}
.colorlib-nav ul li a {
position: relative;
font-size: 15px;
padding: 30px 12px;
color: rgba(255, 255, 255, 0.7);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s; }
.colorlib-nav ul li a:hover {
color: #ecca57; }
.colorlib-nav ul li.has-dropdown {
position: relative; }
.colorlib-nav ul li.has-dropdown .dropdown {
width: 140px;
-webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
z-index: 1002;
visibility: hidden;
opacity: 0;
position: absolute;
top: 40px;
left: 0;
text-align: left;
background: #000;
padding: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s; }
.colorlib-nav ul li.has-dropdown .dropdown:before {
bottom: 100%;
left: 40px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #000;
border-width: 8px;
margin-left: -8px; }
.colorlib-nav ul li.has-dropdown .dropdown li {
display: block;
margin-bottom: 7px; }
.colorlib-nav ul li.has-dropdown .dropdown li:last-child {
margin-bottom: 0; }
.colorlib-nav ul li.has-dropdown .dropdown li a {
padding: 2px 0;
display: block;
color: #999999;
line-height: 1.2;
text-transform: none;
font-size: 13px;
letter-spacing: 0; }
.colorlib-nav ul li.has-dropdown .dropdown li a:hover {
color: #fff; }
.colorlib-nav ul li.has-dropdown:hover a, .colorlib-nav ul li.has-dropdown:focus a {
color: #ecca57; }
.colorlib-nav ul li.btn-cta a {
padding: 30px 0px !important;
color: #fff; }
.colorlib-nav ul li.btn-cta a span {
background: #9870FC;
/* Old browsers */
background: -moz-linear-gradient(45deg, #c48f25 0%, #f3d672 50%, #b68013 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #c48f25 0%, #f3d672 50%, #b68013 100%);
/* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(45deg, #c48f25 0%, #f3d672 50%, #b68013 100%);
background: linear-gradient(45deg, #c48f25 0%, #f3d672 50%, #b68013 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b68013', endColorstr='#f3d672',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
padding: 8px 15px;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px; }
.colorlib-nav ul li.btn-cta a:hover span {
-webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75); }
.colorlib-nav ul li.active > a {
color: #ecca57 !important;
position: relative; }
.colorlib-nav ul li.active > a:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }