title: How can I make my WordPress Nav Links Show Up?
body: <p>I was trying to replace the hamburger menu that is with this theme, I successfully removed the hamburger menu through editing the styles in the child theme. I added these code in my customizer but the my nav links doesn't show up. I wanted to make the nav links into a horizontal position just like the default menus. I would appreciate some help. Thank you! This is the code I added in my customizer:</p>
  
  <pre><code>@media screen and ( min-width: 1024px ) and (max-width: 1281px) {
  
  
  .menu-toggle {
      display: none;
    }
    .site-logo {
      max-height: 100px;
    }
    .has-site-logo .main-navigation {
      height: 100px;
    }
    .has-site-logo .main-navigation &gt; div,
    .has-site-logo .main-navigation &gt; ul {
      position: relative;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .main-navigation {
      font-size: 0.8125em;
      line-height: 2.09231em;
      clear: none;
      float: right;
      max-width: 50%;
      text-align: right;
    }
    .main-navigation ul:first-child {
        display: block;
    }
    .main-navigation ul li {
      display: inline-block;
    }
    .main-navigation ul li:hover &gt; ul,
    .main-navigation ul li.focus &gt; ul {
      display: block;
      opacity: 1;
      visibility: visible;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .main-navigation ul a {
      border-bottom: 0;
      padding: 5px 0 5px 14px;
    }
    .main-navigation ul ul {
      background: white;
      border: 1px solid #eeeeee;
      display: none;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      float: left;
      opacity: 0;
      padding: 0 7px;
      position: absolute;
      top: 27px;
      left: 0;
      text-align: left;
      visibility: hidden;
      z-index: 99999;
    }
    .main-navigation ul ul li {
      border-bottom: 1px solid #eeeeee;
      padding: 5px 5px 4px;
    }
    .main-navigation ul ul li:last-of-type {
      border-bottom: 0;
    }
    .main-navigation ul ul li a {
      line-height: 1.5;
      padding: 5px;
      width: 180px;
    }
    .main-navigation ul ul ul {
      left: 100%;
      top: 0;
    }
    .main-navigation ul ul li a,
    .main-navigation ul ul ul li a,
    .main-navigation ul ul ul ul li a {
      padding-left: 5px;
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OJGEV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OJGEV.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/NrG7Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NrG7Q.png" alt="enter image description here"></a></p>
  
  <p>This is how it looks like when I added the code. The hamburger disappears but my navs links won't show up and horizontally. I'm using the default Wordpress theme Scrawl for testing purposes.</p>