Jump to content

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

Recommended Posts

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?

Link to comment
  • Replies 3
  • Views 634
  • Created
  • Last Reply
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)

Screen Shot 2021-05-03 at 9.50.49 AM.png

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.