How do I show the full nagivation bar, instead of the three-line button?

Site URL: https://joshuaaidiomusic.squarespace.com/

I'm having trouble showing the full navigation bar for the home page. It was able to show it all before, but when I added another page, it turned into the three-line button at the top right. That's fine for all the other pages. But I would very much like to have the navigation bar show all its pages in a horizontal line like before. Anyone have any suggestions?

4 hours ago, JoshuaAI said:

Site URL: https://joshuaaidiomusic.squarespace.com/

I'm having trouble showing the full navigation bar for the home page. It was able to show it all before, but when I added another page, it turned into the three-line button at the top right. That's fine for all the other pages. But I would very much like to have the navigation bar show all its pages in a horizontal line like before. Anyone have any suggestions?

Try adding to Design > Custom CSS

 @media screen and (min-width:768px) {
div#headerNav {
    display: table-cell !important;
}
#header #mainNavWrapper {
    position: relative;
    z-index: 200000;
    transform: unset !important;
    width: 100% !important;
    top: unset !important;
    left: unset !important;
    bottom: unset !important;
    right: unset !important;
    height: auto !important;
    overflow: visible;
}
nav#mainNavigation {
    display: flex !important;
    justify-content: flex-end;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: auto;
      white-space: initial;
  width: 80% !important;
  align-items: center;
}
nav#mainNavigation>div {
    max-width: 200px;
  text-align: center;
}
nav#mainNavigation>div:nth-child(5) {
    max-width: 100px;
}
header#header .nav-wrapper .folder .subnav {
    text-align: left !important;
    padding: 1em 0 !important;
    display: inline-block !important;
    position: absolute !important;
    top: 100% !important;
    left: -.5em !important;
    position: absolute !important;
    z-index: 50000 !important;
    top: 2em !important;
    opacity: 0 !important;
    -webkit-transition: -webkit-transform .14s 0s ease-in-out;
    -moz-transition: -moz-transform .14s 0s ease-in-out;
    -ms-transition: -ms-transform .14s 0s ease-in-out;
    -o-transition: -o-transform .14s 0s ease-in-out;
    transition: transform .14s 0s ease-in-out;
    font-size: 12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-transform: scale(1,0);
    -moz-transform: scale(1,0);
    -ms-transform: scale(1,0);
    -o-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
  margin-top: 10px;
}
header#header .nav-wrapper .folder:hover .subnav {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  opacity: 1 !important;
  top: 100% !important;
}
  #headerNav a {
    text-decoration: none !important;
}}

5 hours ago, tuanphan said:

Try adding to Design > Custom CSS

 @media screen and (min-width:768px) {
div#headerNav {
    display: table-cell !important;
}
#header #mainNavWrapper {
    position: relative;
    z-index: 200000;
    transform: unset !important;
    width: 100% !important;
    top: unset !important;
    left: unset !important;
    bottom: unset !important;
    right: unset !important;
    height: auto !important;
    overflow: visible;
}
nav#mainNavigation {
    display: flex !important;
    justify-content: flex-end;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 0 !important;
    margin-left: auto;
      white-space: initial;
  width: 80% !important;
  align-items: center;
}
nav#mainNavigation>div {
    max-width: 200px;
  text-align: center;
}
nav#mainNavigation>div:nth-child(5) {
    max-width: 100px;
}
header#header .nav-wrapper .folder .subnav {
    text-align: left !important;
    padding: 1em 0 !important;
    display: inline-block !important;
    position: absolute !important;
    top: 100% !important;
    left: -.5em !important;
    position: absolute !important;
    z-index: 50000 !important;
    top: 2em !important;
    opacity: 0 !important;
    -webkit-transition: -webkit-transform .14s 0s ease-in-out;
    -moz-transition: -moz-transform .14s 0s ease-in-out;
    -ms-transition: -ms-transform .14s 0s ease-in-out;
    -o-transition: -o-transform .14s 0s ease-in-out;
    transition: transform .14s 0s ease-in-out;
    font-size: 12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -webkit-transform: scale(1,0);
    -moz-transform: scale(1,0);
    -ms-transform: scale(1,0);
    -o-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
  margin-top: 10px;
}
header#header .nav-wrapper .folder:hover .subnav {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  opacity: 1 !important;
  top: 100% !important;
}
  #headerNav a {
    text-decoration: none !important;
}}

 

It did open up the navigation bar, but now all the text are squished close together, and there's a black side bar on the right. And the navigation bar clashes with that side bar. Any way to fix that? (I did not save it yet)

Okay, so apparently the issue has resolved itself and the navigation bar opened up fully today. Not sure how that happened but I'm good now!