Jump to content

Navigation Bar Drop Down Menu - Needs Customisation

Recommended Posts

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

SquareSpace navigation menus can be very limited especially when you require a drop down menu! I really need some help customising mine, if anyone can provide me with a custom code or any kind of solution that would be so awesome. Willing to pay a one off fee for a solution that I can play around with and customise myself, which creates a final code for me that I can add to the website. 

Here is my website:

https://www.supersizesocial.com/

If you hover your mouse over the 'instagram services' and 'social media marketing' drop downs to see how it currently looks. I'm sure you'll agree with me that it's very tacky and basic!

Here are the customisations I would like to make:

- I would like a hover effect for the entire navigation bar and for the options in the drop down. Just a simple effect that makes the text faded or the background space behind the text faded. This would make the navigation bar a bit more dynamic. 

- The space around each option in the drop down menu is very small and the options are cramped together too much. No way of increasing this space. 

- The plane white drop down box is very boring and tacky. Some colour around the edge or at the top would be great. Also a shadow effect and / or transparency effect would work well. Also, rounded corners would be nice. 

- This plane white space is actually too big, if you see in the 'social media marketing' drop down there is too much space on the left of the text. 

- Some icons next to each option would be amazing!

Any help would be greatly appreciated! 

Link to comment
  • Replies 8
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

15 hours ago, supersizesocial said:

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

SquareSpace navigation menus can be very limited especially when you require a drop down menu! I really need some help customising mine, if anyone can provide me with a custom code or any kind of solution that would be so awesome. Willing to pay a one off fee for a solution that I can play around with and customise myself, which creates a final code for me that I can add to the website. 

Here is my website:

https://www.supersizesocial.com/

If you hover your mouse over the 'instagram services' and 'social media marketing' drop downs to see how it currently looks. I'm sure you'll agree with me that it's very tacky and basic!

Here are the customisations I would like to make:

- I would like a hover effect for the entire navigation bar and for the options in the drop down. Just a simple effect that makes the text faded or the background space behind the text faded. This would make the navigation bar a bit more dynamic. 

- The space around each option in the drop down menu is very small and the options are cramped together too much. No way of increasing this space. 

- The plane white drop down box is very boring and tacky. Some colour around the edge or at the top would be great. Also a shadow effect and / or transparency effect would work well. Also, rounded corners would be nice. 

- This plane white space is actually too big, if you see in the 'social media marketing' drop down there is too much space on the left of the text. 

- Some icons next to each option would be amazing!

Any help would be greatly appreciated! 

Add to Design > Custom CSS

/* nav on hover */
div.header-nav-item a:hover {
    opacity: 0.5;
}
/* space between dropdown items */
.header-nav-folder-item {
    margin-bottom: 10px;
}
/* dropdown border shadow */
.header-nav-folder-content {
    border: 2px solid green;
    border-radius: 5px;
    box-shadow: 5px 5px 7px green;
}

With add icons

Same icons for all dropdown items or different icon?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

That's super helpful thank you so much!

https://www.supersizesocial.com/

I had a play with the colours and shadow in the code you made, looks much better now thanks! Will keep playing around with it.

/* nav on hover */
div.header-nav-item a:hover {
    opacity: 0.5;
}
/* space between dropdown items */
.header-nav-folder-item {
    margin-bottom: 10px;
}
/* dropdown border shadow */
.header-nav-folder-content {
    border: 1px solid white;
    border-radius: 3px;
    box-shadow: 1px 3px 10px black;
}

I would like to remove the line of shadow at the top of the drop down box, any idea how to do that? 

Link to comment
15 hours ago, supersizesocial said:

That's super helpful thank you so much!

https://www.supersizesocial.com/

I had a play with the colours and shadow in the code you made, looks much better now thanks! Will keep playing around with it.

/* nav on hover */
div.header-nav-item a:hover {
    opacity: 0.5;
}
/* space between dropdown items */
.header-nav-folder-item {
    margin-bottom: 10px;
}
/* dropdown border shadow */
.header-nav-folder-content {
    border: 1px solid white;
    border-radius: 3px;
    box-shadow: 1px 3px 10px black;
}

I would like to remove the line of shadow at the top of the drop down box, any idea how to do that? 

in this line

Quote

box-shadow: 1px 3px 10px black;

change 3px to 7px

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Okay great! Think I'm learning more how this works now thanks so much. 

The only other thing I'd really like to do now is to have icons for each one. Each icon will be the colour of the 'get started' button so will need to use exact colour code. 

Each icon will need to be a different symbol related to the service. Are you able to do that? Might be easier if I can change the symbols myself but not sure how it could work.

Thanks so much for your help really appreciate this. 

Link to comment
On 8/8/2021 at 9:32 PM, supersizesocial said:

Okay great! Think I'm learning more how this works now thanks so much. 

The only other thing I'd really like to do now is to have icons for each one. Each icon will be the colour of the 'get started' button so will need to use exact colour code. 

Each icon will need to be a different symbol related to the service. Are you able to do that? Might be easier if I can change the symbols myself but not sure how it could work.

Thanks so much for your help really appreciate this. 

Hi. Add to Design > Custom CSS. Do similar for other items

/* Instagram Power Likes */
.header-nav-folder-item [href="/powerlikes"]:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/08/07/21/00/ural-owl-6529375__340.jpg);
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram PowerComments */
.header-nav-folder-item [href="/powercomments"]:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/08/06/18/51/lake-6526995__340.jpg);
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram PowerStories */
.header-nav-folder-item [href="/powerstories"]:before {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/08/06/16/14/wicker-baskets-6526674__340.jpg);
    background-size: contain;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 5px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

amazing!

This is what I've got now, have put my own icons. 

/* Instagram Power Likes */
.header-nav-folder-item [href="/powerlikes"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b458a1c3e55c3d012a73/1628681304615/Rocket+icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram PowerComments */
.header-nav-folder-item [href="/powercomments"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b4622aea584297d577c7/1628681314972/Comments+Icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram PowerStories */
.header-nav-folder-item [href="/powerstories"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b4697eb41e137050e495/1628681322043/Powerstories+Icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram Giveaway Growth */
.header-nav-folder-item [href="/instagram-growth"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b45b47dc61687594d983/1628681308023/Promotion+Icon.png);
    background-size: contain;
    width: 18px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Content Creation */
.header-nav-folder-item [href="/social-media-management"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b466fd52fd239ac0c13c/1628681318757/Content+Creation+icon.png);
    background-size: contain;
    width: 18px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Blue Badge */
.header-nav-folder-item [href="/blue-badge"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b45f9f149c7edca64961/1628681311546/blue+badge+icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}

 

 

It's starting to really come together now thanks so much! A few more little tweaks and I'll be done I think! 

Is there a way to slightly lower the icons so they are more inline with the text? They are just a bit too high. If I do this then I think I can also make them a bit bigger as they'll have a bit more space. 

 

The last thing I really need to do is align each option in the drop down menu to the left, right now they are aligned to the right for some reason. Can't find a way to change this outside of using code. Think it'll look much better this way.

 

Thank you so much once again!

Link to comment
On 8/11/2021 at 6:34 PM, supersizesocial said:

amazing!

This is what I've got now, have put my own icons. 

/* Instagram Power Likes */
.header-nav-folder-item [href="/powerlikes"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b458a1c3e55c3d012a73/1628681304615/Rocket+icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram PowerComments */
.header-nav-folder-item [href="/powercomments"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b4622aea584297d577c7/1628681314972/Comments+Icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram PowerStories */
.header-nav-folder-item [href="/powerstories"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b4697eb41e137050e495/1628681322043/Powerstories+Icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Instagram Giveaway Growth */
.header-nav-folder-item [href="/instagram-growth"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b45b47dc61687594d983/1628681308023/Promotion+Icon.png);
    background-size: contain;
    width: 18px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Content Creation */
.header-nav-folder-item [href="/social-media-management"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b466fd52fd239ac0c13c/1628681318757/Content+Creation+icon.png);
    background-size: contain;
    width: 18px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
/* Blue Badge */
.header-nav-folder-item [href="/blue-badge"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5fb695a56248b6302676b78d/t/6113b45f9f149c7edca64961/1628681311546/blue+badge+icon.png);
    background-size: contain;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}

 

 

It's starting to really come together now thanks so much! A few more little tweaks and I'll be done I think! 

Is there a way to slightly lower the icons so they are more inline with the text? They are just a bit too high. If I do this then I think I can also make them a bit bigger as they'll have a bit more space. 

 

The last thing I really need to do is align each option in the drop down menu to the left, right now they are aligned to the right for some reason. Can't find a way to change this outside of using code. Think it'll look much better this way.

 

Thank you so much once again!

Hi. Add to Design > Custom CSS

/* Align dropdown */
.header-nav-folder-content {
    text-align: left !important;
}
/* align icons text */
.header-nav-folder-item a:before {
    position: relative;
    top: 2px;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.