Adding "Forte" template features to my webpage

Site URL: https://forte-demo.squarespace.com/

Hi, this is my first post so be gentle 😊 

There are a couple of features that I would like to add from this Squarespace template: https://forte-demo.squarespace.com/ to my own webpage on here.

I'd like to make the dropdown menu for "projects" positioned lower and with a small arrow/triangle at the top (I've attached a picture of the menu). Also, I'd like to know how to style the dropdown menu - is this an option on Squarespace? For example, how do I position the list on the left-hand side, rather than the right?

This is how mine looks at the moment:

Hi. all are possible. Can you share link to your site? We can help easier

On 12/22/2021 at 5:04 PM, tuanphan said:

Hi. all are possible. Can you share link to your site? We can help easier

Thanks so much Tuanphan, that's a great help and happy new year! 

Does this link work for you? https://accordion-jaguar-tztz.squarespace.com/config/

Regards,

Tomm

On 1/3/2022 at 11:49 AM, tommmmusic said:

Thanks so much Tuanphan, that's a great help and happy new year! 

Does this link work for you? https://accordion-jaguar-tztz.squarespace.com/config/

Regards,

Tomm

The site is private. Can you setup password & share url? We can check easier

Sure! It's https://accordion-jaguar-tztz.squarespace.com/

and the password is:

ost

Please let me know if you have any other questions. Many thanks! 

On 1/6/2022 at 4:13 PM, tommmmusic said:

Sure! It's https://accordion-jaguar-tztz.squarespace.com/

and the password is:

ost

Please let me know if you have any other questions. Many thanks! 

Add to Design > Custom CSS

/* dropdown with arrow */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
    margin-top: 10px;
}
.header-nav-folder-content:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-width: 0 0 10px;
    border-style: solid;
    border-right: solid 10px transparent;
    border-left: solid 10px transparent;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
}
.header-nav-folder-content * {
    text-align: left !important;
}

Thanks so much Tuanphan! That's great, really appreciate that. I've updated the css, and it worked - there's just a few changes I'd like to make, based on the same Forte template. 

1. I'd like the dropdown box, that appears, to have white background, with black font.

2. I'd also like to reposition the text to the left, not centred, and to make the box bigger like Forte (when the box is smaller, it's harder to get make a selection on that dropdown menu)

3. When you mouseover the different page options (movies/tv, I may add more), can you make the selected page have an underline animation?

I've attached a screenshot of how the Forte dropdown looks.

Thanks again!

Tomm

#1. #2. Use this CSS

.header-nav-folder-content {
    background-color: white !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
.header-nav-folder-content a {
    color: black !important;
}
.header-nav-folder-content:before {
    border-color: white;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

#3. Can you describe the underline animation?

Hey Tuanphan, thanks for the code. Just a few more things, would be a great help! I've attached a picture showing how I'd like it to look

1. I'd like the drop down box to extend further out and to be a wider box than currently

2. The sub-headers inside the drop down box to be located on the left-hand side, the same as in the Forte template

3. Can we change the font on the top menu to the same as Forte template, which is Futura PT? I'm guessing that the page title ("Tomm Matthews"), on the left, will have to also follow the same font? 

4. I'd like to change the font in the drop down menu to Proxima Nova, again as in Forte template

- For the underline animation in the drop down menu, I've taken a video of how it can look:

Again thanks so much for your help and Happy Lunar New Year!

If you have any confusion, please do let me know.

Tomm

Hey Tuanphan, just another two details:

5. The "Contact Me" on the top menu, I want to have the exact same as font and look as "Projects" and "About", without a border round it. I've attached a video of how it would look, so where it says "Read Me" on Forte, mine would say "Contact Me". Also, I would like to animate the selection with underline (.mov file like above message may need to be downloaded).

Thanks so much!

Tomm

Hey Tuanphan! Do you have any update on this? Many thanks!!

Try this CSS

.header-nav-folder-content {
    min-width: 350px !important;
}
div.header-nav-item>a {
    font-family: futura-pt !important;
}
div.header-nav-folder-item a {
    font-family: proxima-nova !important;
}

Hey, thanks for the CSS - I don't think this is really working, there's just too many things that I'm not happy with using this particular template - I really just want to start over, delete this webpage & template and completely start over using the Forte template from the start.

Could you please give me clear instructions on how to do that?

Many thanks again!

5 hours ago, tommmmusic said:

Hey, thanks for the CSS - I don't think this is really working, there's just too many things that I'm not happy with using this particular template - I really just want to start over, delete this webpage & template and completely start over using the Forte template from the start.

Could you please give me clear instructions on how to do that?

Many thanks again!

You can't transfer between SS 7.1. - 7.0. You need to start a new trial with Forte Template Here

https://www.squarespace.com/templates/browse/v7