使按钮更易于点击 - 增加CSS中的点击区域

Question

我正在修改shopify模板，并尝试移动导航菜单更加可点击。在删除文本菜单之前，它工作正常。从它，寻找一个更小的外观，以便它只是没有文字的图形。现在只有一半的点击实际上是目标，所以我需要一种方法来增加可点击区域的大小。

以下是移动导航的CSS代码：

/* Header */

#mobile-header {
  display: none;
  text-align: right;
  background: {{ settings.head_bg_col }};
  color: {{ settings.head_txt_col }};
  border-bottom: 1px solid {{ settings.head_nav_div_col }};
  font-size: 25px;
  line-height: 32px;
}

#mobile-header a {
  color: inherit;
}

#mobile-header .mobile-nav-toggle {
  text-transform: lowercase;
  float: left;
  position: relative;
  padding: 0 1em 0 2em;
  color: inherit;
}

如果这会有所帮助，我已经添加了更多代码。基本上我正在尝试小菜单（触发元素？），这个网站上的三行：https://zenminded.uk/ - 更易于点击。实际上，触发错过的尝试有一半。

 #mobile-header .mobile-nav-toggle span {
      position: absolute;
      background: {{ settings.head_txt_col }};
      left: 0.5em;
      width: 1em;
      height: 1px;
      top: 0;
      margin-top: 17px;
    }


    #mobile-header .mobile-nav-toggle span:nth-child(1) { top: 5px; }
    #mobile-header .mobile-nav-toggle span:nth-child(2) { top: 10px; }

    #mobile-nav-return {
      z-index: 7000;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      background: rgba(0,0,0,0.3);
      opacity: 0;
      transition: opacity 250ms;
    }

    #main-nav .mobile-features {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    #main-nav .mobile-features .mobile-nav-toggle {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 200px;
      height: 100%;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      transition: opacity 500ms, left 500ms;
    }

    #main-nav .mobile-features .mobile-search input[type=text] {
      box-sizing: border-box;
      width: 100%;
      border: none;
      height: 40px;
    }

    #main-nav .mobile-features .mobile-search input[type=submit] {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 35px;
    }

@media only screen and (max-width: 600px) {
  /* Mobile header */
  #mobile-header {
    display: block;
  }

  .reveal-mobile-nav #mobile-nav-return {
    height: 100%;
    opacity: 1;
  }

  #pageheader {
    border-bottom: 1px solid {{ settings.head_nav_div_col }};
  }

  #pageheader .logo {
    padding: {{ settings.logo_top_pad | divided_by: 2 }}px 0 {{ settings.logo_bot_pad | divided_by: 2 }}px;
  }

  #pageheader .util-area .search-box {
    display: none;
  }

  #main-nav {
    position: fixed;
    text-align: left;
    background: {{ settings.panel_nav_bg }};
    border-right: 1px solid {{ settings.head_nav_div_col }};
    left: 0;
    width: 260px;
    top: 0;
    height: 100%;
    margin-left: -260px;
    z-index: 8000;
    transition: margin-left 250ms;
  }

  .reveal-mobile-nav #main-nav {
    margin-left: 0;
  }

  .reveal-mobile-nav #main-nav .mobile-nav-toggle {
    left: 100%;
    opacity: 1;
  }

  #main-nav .mobile-features {
    display: block;
    border-bottom: 1px solid {{ settings.head_nav_div_col }};
  }

  #main-nav .multi-level-nav {
    overflow: auto;
    max-height: 100%;
    padding-top: 40px;
    box-sizing: border-box;
  }

  #main-nav.nav-row ul {
    width: 100%;
  }

  #main-nav.nav-row ul li {
    display: block;
    padding: 0;
  }

  #main-nav.nav-row .mobile-expanded > ul {
    display: block;
  }

  #main-nav.nav-row .multi-level-nav > div > ul { display: none; }
  #main-nav.nav-row .multi-level-nav > div.tier-1 > ul { display: block; }

  #main-nav .multi-level-nav ul ul {
    background: {{ settings.panel_nav_bg_3 }};
    padding-bottom: 0;
  }
  #main-nav .multi-level-nav > div > ul > li > ul { background: {{ settings.panel_nav_bg_2 }}; }

  #main-nav.nav-row ul li a.has-children:after {
    content: '+';
    margin-left: 5px;
    width: 10px;
  }

  #main-nav.nav-row ul li.mobile-expanded > a.has-children:after {
    content: '-';
  }

  #main-nav.nav-row ul li a.has-children .exp {
    display: none;
  }

  #main-nav.nav-row a.listing-title {
    font-weight: normal;
  }

  #main-nav.nav-row ul ul li a { margin-left: 10px; }
  #main-nav.nav-row ul ul ul li { margin-left: 10px; }

  #main-nav a { display: block; }
  #main-nav a.expanded { color: {{ settings.font_col_nav }}; }
  #main-nav a:hover { color: {{ settings.font_col_nav_hov }}; }

  #main-nav .account-links a {
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
  }