How can I make my WordPress Nav Links Show Up? - php

Question

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:
#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 > div,
.has-site-logo .main-navigation > 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 > ul,
.main-navigation ul li.focus > 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;
}
}
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.