Jump to content

Re-order custom columns in Navigation menu?

Recommended Posts

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

In the screenshot below, I have created 4 columns using the CSS for the drop down when "Destinations" is hovered on. It's filled with Regions and Countries. The regions are in bold and the countries within that region fall under them in regular text. 

What I'd like to do is set up each column to begin with the bold Region but I am lost on how to do that. Ideally, Central Asia & Far EastEurope and South Caucasus, Middle East, and Russia would all be at the top of each column with its countries following below. 


Right now, my code to style the header is below, It can probably be optimized too... but right now I'd just like to set up my nav menu how I want it.

/* Nav design */
.header-title-nav-wrapper {
    flex: 1 0 75%!important;
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
[href="/destinations"]+.header-nav-folder-content {
  position: fixed!important;
  position: center!important;
  max-width: 75vw!important;
    margin-left: 6vw!important;
    margin-right: 6vw!important;
    column-count: 4!important;
.header-nav-folder-content a {padding-bottom:0.2em!important;padding-top:0.5em!important}
  border: 1px solid #1b6fc1}
#block-yui_3_17_2_1_1612978871795_2959 h1{color:#fff}
  .sqs-block-image .design-layout-collage .image-overlay{
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 20px!important;
   {font-weight: bold!important}
   {font-weight: bold!important}
   {font-weight: bold!important}
   {font-weight: bold!important}
   {font-weight: bold!important}
   {font-weight: bold!important}
   {font-weight: bold!important}
          padding: 0em 1em!important;
  .header-nav-folder-item {
    font-size: 20px;

.header-nav-folder-item:hover {
    background: #1470af!important;
    a {color: #fff!important;}


Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Add to Design > Custom CSS

[data-section-id="61c1f4baa5fae80876c6ebc4"] span.accordion-item__title {
    font-weight: bold;


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.