Jump to content

Adding text to navigation bar (tricky)

Recommended Posts

Site URL: https://www.joequint.com/

I wanted to have titles for three different navigation sections of my site and the only way I could come up with to cheat it was to create folders - that don't drop down - with the words (ASSIGNMENTS, PROJECT, MOTION). Further, I wouldn't want the pages to be nested in folders anyway.

This is having detrimental impact in search... they end up being seen as 'pages' without text. And, if you were to type 'https://www.joequint.com/motion', you get a message saying 'This folder does not contain any pages'.

Is there a better solution other than using these folders as headings?

Link to comment
  • Replies 10
  • Views 501
  • Created
  • Last Reply
8 minutes ago, joequint said:

Site URL: https://www.joequint.com/

I wanted to have titles for three different navigation sections of my site and the only way I could come up with to cheat it was to create folders - that don't drop down - with the words (ASSIGNMENTS, PROJECT, MOTION). Further, I wouldn't want the pages to be nested in folders anyway.

This is having detrimental impact in search... they end up being seen as 'pages' without text. And, if you were to type 'https://www.joequint.com/motion', you get a message saying 'This folder does not contain any pages'.

Is there a better solution other than using these folders as headings?

Get rid of the folder and take advantage of psuedo :before selector I can achieve this

#mainNavigation li:nth-child(1):before {
  content: 'ASSIGNMENTS';
  font-weight: bolder;
  margin-bottom: .1em;
  margin-top: 1em;
  color: #999;
}
#mainNavigation li:nth-child(6) {
  margin-top: 1em;
}
#mainNavigation li:nth-child(6):before {
  content: 'PROJECTS';
  font-weight: bolder;
  margin-bottom: .1em;
  color: #999;
}
#mainNavigation li:nth-child(10) {
  margin-top: 1em;
}
#mainNavigation li:nth-child(10):before {
  content: 'PROJECTS';
  font-weight: bolder;
  margin-bottom: .1em;
  color: #999;
}

image.png.3e59cbc230e348a52668fa4590c0c10a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Just now, joequint said:

Wow, @bangank36, that's pretty perfect... thanks so much.

One issue I was having had to do with SEO. I did an audit and those "pages" (I guess Google saw the folders as pages) were negatively impacting. Do you think, now that it's just text, I would be better off?

I dont answer for your question

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
16 minutes ago, joequint said:

@bangank36I know I'm being super-fussy but do you know how I would adjust the space under the word PROJECTS?

thanks!

Try the margin-bottom

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Just now, joequint said:

hmm... no change.

Ok i will check tomorrow

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
8 hours ago, joequint said:

much appreciated.

Add this 

#mainNavigation li:nth-child(1) a,
#mainNavigation li:nth-child(6) a,
#mainNavigation li:nth-child(10) a {
margin-top: 1em;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.