Mobile Menu Spacing

Hi there!
After hours trying to figure that one out - I am stuck! Any help would be appreciated. Thanks in advance :slight_smile:

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:
preview

.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); }

Hi there

Hope you are having a good day and thank you for your question
Please always include a link to the page in question :slight_smile:

Thanks!
Colorlib Support Team

There you go:

hey thereHope you are having a good day and thank you for your question :slight_smile:

Please add this CSS, in appearance - customize - additional CSS

@media screen and (max-width: 768px) {

  #colorlib-offcanvas li{
	margin-bottom:1em !important;
	}

}
Thanks!
Colorlib Support Team

Works perfectly! Thanks!

Thank you too :slight_smile:

I will close this case, let us know if you need anything else in new ticket

Thank you too :slight_smile:

I will close this case, let us know if you need anything else in new ticket

Thank you too :slight_smile:

I will close this case, let us know if you need anything else in new ticket

Thank you too :slight_smile:

I will close this case, let us know if you need anything else in new ticket