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

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

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

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

@bangank36

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

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

cUr10s1ty!

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;
}

@bangank36Perf

20 hours ago, bangank36 said:

For the navigation position

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

Worked like a dream! Thank you!