Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Navigation drop down box alignment & accordion dropdown text from an image - Code Help


theRooRoo

Question

Hi There, I am new to Squarespace, but have worked in a lot other platforms and have coding experience from 10 yrs ago. So needless to say I am a little rusting in the coding department. 

I am looking for some coding help on getting my sites navigation drop down box to fit with the text; align with main folder and wrap sub nav titles. In my screenshot the box should align with top navigation link. Here is the code I have used:

/* Change dropdown menu background */
.header-nav-folder-content {
  background: #F3F3F3 !important;
  font-size: 15px; 
}
/* Align left dropdown */
.header-nav-folder-content {
    text-align: left !important; background-size: auto;}

/*Change width of drop down & wrap text*/
.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 50%;
  }

I am also looking for code suggestions on creating drop down text from an image. It is the same concept of dropdown accordion text but I want the text to drop when the image is clicked. S849507928_ScreenShot2021-03-03at4_29_08PM.thumb.png.8caa52aa1ef76bd346cdb00b27377e09.pngee second screen shot of the 4 images; I want the text below to drop when the image is clicked vs. being static text below. 

My site is still in trial mode so I can't share the link. 

Screen Shot 2021-03-01 at 5.00.57 PM.png

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

For the navigation position .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { right: auto; }

Hi There, I am new to Squarespace, but have worked in a lot other platforms and have coding experience from 10 yrs ago. So needless to say I am a little rusting in the coding department.  I am lo

@bangank36 Thanks for reaching out. I have enabled my trial site.  https://fiddle-flute-dw8f.squarespace.com/ cUr10s1ty!

Posted Images

4 answers to this question

Recommended Posts

  • 0
3 hours ago, theRooRoo said:

 

Hi There, I am new to Squarespace, but have worked in a lot other platforms and have coding experience from 10 yrs ago. So needless to say I am a little rusting in the coding department. 

I am looking for some coding help on getting my sites navigation drop down box to fit with the text; align with main folder and wrap sub nav titles. In my screenshot the box should align with top navigation link. Here is the code I have used:

/* Change dropdown menu background */
.header-nav-folder-content {
  background: #F3F3F3 !important;
  font-size: 15px; 
}
/* Align left dropdown */
.header-nav-folder-content {
    text-align: left !important; background-size: auto;}

/*Change width of drop down & wrap text*/
.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 50%;
  }

I am also looking for code suggestions on creating drop down text from an image. It is the same concept of dropdown accordion text but I want the text to drop when the image is clicked. S849507928_ScreenShot2021-03-03at4_29_08PM.thumb.png.8caa52aa1ef76bd346cdb00b27377e09.pngee second screen shot of the 4 images; I want the text below to drop when the image is clicked vs. being static text below. 

My site is still in trial mode so I can't share the link. 

Screen Shot 2021-03-01 at 5.00.57 PM.png

You can enable site wide password and let us know the link

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
11 hours ago, theRooRoo said:

@bangank36

Thanks for reaching out. I have enabled my trial site. 

https://fiddle-flute-dw8f.squarespace.com/

cUr10s1ty!

For the navigation position

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
  right: auto;
}

image.png.55b3e0997d9bdb224c7db48c1a959f43.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...