Jump to content

Dropdown Menu remove colour and change width, Squarespace 7.1

Recommended Posts

Site URL: https://www.aditya-sinha.com/

Hi!

I needed help changing the background colour for the dropdown menu on my homepage. Ideally if I could remove the colour and add a hover, that would be great! Please do suggest any Custom CSS I can add for it. 

If not that, then if there's a way to reduce the width of the dropdown menu to the text and add a transparent background instead.  @tuanphan if you could help, that would be wonderful. thanks!

Password for access: tester

Link to comment
35 minutes ago, sastavangogh said:

Site URL: https://www.aditya-sinha.com/

Hi!

I needed help changing the background colour for the dropdown menu on my homepage. Ideally if I could remove the colour and add a hover, that would be great! Please do suggest any Custom CSS I can add for it. 

If not that, then if there's a way to reduce the width of the dropdown menu to the text and add a transparent background instead.  @tuanphan if you could help, that would be wonderful. thanks!

Password for access: tester

Use

body:not(.header--menu-open) .black .header-nav-folder-content {
    background-color: transparent;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
42 minutes ago, bangank36 said:

Use


body:not(.header--menu-open) .black .header-nav-folder-content {
    background-color: transparent;
}

 

Thank you, it worked! Is there any way I can also add a hover feature to underline the titles? Either through Custom CSS or site styles.

Link to comment
12 hours ago, tuanphan said:

@sastavangogh Add to Design > Custom CSS



/* nav underline */
.header-nav-item a:hover {
    border-bottom: 1px solid white;
}

 

Hey, I tried this and while it makes the bottom border white on the homepage, but it makes the bottom border become transparent on the other pages. Is there any way through CSS that I can retain the white border on homepage, and then change to black on the other pages? Please let me know.

I can only include CSS code and not direct header injection.

Edited by sastavangogh
Link to comment

@sastavangogh Add this new code

/* nav underline */
body.homepage .header-nav-item a:hover {
    border-bottom: 1px solid white;
}
body:not(.homepage) .header-nav-item a:hover {
    border-bottom: 1px solid black !important;
}

 

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
11 hours ago, tuanphan said:

@sastavangogh Add this new code



/* nav underline */
body.homepage .header-nav-item a:hover {
    border-bottom: 1px solid white;
}
body:not(.homepage) .header-nav-item a:hover {
    border-bottom: 1px solid black !important;
}

 

Thans once again, @tuanphan! This has solved my issue 🙂 I was wondering how to edit this code to include a transition delay in the hover as well. Would that be possible? 

Edited by sastavangogh
Link to comment
On 5/27/2021 at 2:03 AM, sastavangogh said:

Thans once again, @tuanphan! This has solved my issue 🙂 I was wondering how to edit this code to include a transition delay in the hover as well. Would that be possible? 

use this

/* nav underline */
.header-nav-item a {
	transition: all 0.3s;
}
body.homepage .header-nav-item a:hover {
    border-bottom: 1px solid white;
	transition: all 0.3s;
}
body:not(.homepage) .header-nav-item a:hover {
    border-bottom: 1px solid black !important;
	transition: all 0.3s;
}

 

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
4 hours ago, tuanphan said:

use this


/* nav underline */
.header-nav-item a {
	transition: all 0.3s;
}
body.homepage .header-nav-item a:hover {
    border-bottom: 1px solid white;
	transition: all 0.3s;
}
body:not(.homepage) .header-nav-item a:hover {
    border-bottom: 1px solid black !important;
	transition: all 0.3s;
}

 

Thanks! However, I meant a transition delay in terms of animation of the bottom border (left to right). Sorry it if wasn't clearer in the previous response! Any way to do that?

Link to comment
On 5/29/2021 at 1:32 PM, sastavangogh said:

yes!

Hi. Add to Design > Custom CSS

/* link hover */
.header-nav-item a, .header-nav-item {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
    border: none !Important;
}
.header-nav-item a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header-nav-item a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

 

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
34 minutes ago, tuanphan said:

Hi. Add to Design > Custom CSS


/* link hover */
.header-nav-item a, .header-nav-item {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
    border: none !Important;
}
.header-nav-item a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header-nav-item a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

 

Thank you once again Tuanphan, your help is very much appreciated!

Link to comment
2 hours ago, tuanphan said:

Hi. Add to Design > Custom CSS



/* link hover */
.header-nav-item a, .header-nav-item {
    text-decoration: none !important;
    background-image: none !important;
    position: relative;
    border: none !Important;
}
.header-nav-item a:after {
    content: "";
    background: currentColor;
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header-nav-item a:hover:after {
    width: 100%;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

 

Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right.

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links'  font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

*Code for the above: 

h2

 a {

   text-decoration: none!important;

   background: #f6ffed;

   padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

 }

h2 a:hover{

  background: #000000!important;

  color: #ffffff!important;

  padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

Edited by sastavangogh
Link to comment
On 6/1/2021 at 3:11 PM, sastavangogh said:

Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right.

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links'  font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

*Code for the above: 

h2

 a {

   text-decoration: none!important;

   background: #f6ffed;

   padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

 }

h2 a:hover{

  background: #000000!important;

  color: #ffffff!important;

  padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

@bangank36, hi - wanted to check with you if you could help me out with this? Any help would be appreciated, thanks!

Link to comment
On 6/1/2021 at 3:11 PM, sastavangogh said:

Hey, a follow up question: I am trying to apply a similar hover animation to anchor links on the homepage, where in when you hover on the links, the background color changes as a transition from left to right.

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links'  font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

*Code for the above: 

h2

 a {

   text-decoration: none!important;

   background: #f6ffed;

   padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

 }

h2 a:hover{

  background: #000000!important;

  color: #ffffff!important;

  padding-left: 3px;

   padding-right: 3px;

   padding-bottom:1px;

}

Hi I am still looking for an answer to this, if anyone could help me out with the CSS for this that would be really great. Thanks!

Link to comment
6 hours ago, sastavangogh said:

Hi I am still looking for an answer to this, if anyone could help me out with the CSS for this that would be really great. Thanks!

Can you share link to page where you use anchor links?

https://www.aditya-sinha.com/

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links'  font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

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
1 hour ago, tuanphan said:

Can you share link to page where you use anchor links?

https://www.aditya-sinha.com/

*Currently the links have been customised to have a ##f6ffed background and no underline; on hover, the links'  font color changes to white, background colour to black. How can I add the above mentioned LTR transition to the links?

Yeah sure! Its on the homepage, right under the opening slideshow - I want to add a couple more anchor links in this section once the LTR transition works. Screenshot attached for reference.

PW tester

Screenshot 2021-06-07 at 6.38.37 PM.png

Link to comment

Try adding to Design > Custom CSS

/* text hover */
div#block-741f115989846a393cb1 a:after {
    display: inline-block;
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 50px;
    background: green;
    left: 0;
    z-index: 990;
    transition: all 0.3s;
}
div#block-741f115989846a393cb1 a {
    position: relative;
    z-index: 9999;
}
div#block-741f115989846a393cb1 a:hover:after {
    width: 100%;
    transition: all 0.3s;
    z-index: 1000;
}

 

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
22 minutes ago, tuanphan said:

Try adding to Design > Custom CSS



/* text hover */
div#block-741f115989846a393cb1 a:after {
    display: inline-block;
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 50px;
    background: green;
    left: 0;
    z-index: 990;
    transition: all 0.3s;
}
div#block-741f115989846a393cb1 a {
    position: relative;
    z-index: 9999;
}
div#block-741f115989846a393cb1 a:hover:after {
    width: 100%;
    transition: all 0.3s;
    z-index: 1000;
}

 

Hi this works for the LTR transition when I change the background to black! But the text colour wont change to white even when I add "color: #ffffff!important;"?  How can I bring the text on top of the black background in the colour white (on hover)?

Edited by sastavangogh
Link to comment
On 6/8/2021 at 10:44 PM, sastavangogh said:

Hi this works for the LTR transition when I change the background to black! But the text colour wont change to white even when I add "color: #ffffff!important;"?  How can I bring the text on top of the black background in the colour white (on hover)?

Hi,

Remove above code & follow these steps

Step 1. Add a Code Block >> Paste this code

<h2 class="hover-text">Aditya is an <a href="#photographer"><span>independent photographer</span><span class="thover"></span></a> and <a href="#writer"><span>writer</span><span class="thover"></span></a> with a focus on documenting culture and identity, often through the lens of nostalgia.</h2>

Step 2. Add this to Design > Custom CSS

/* hover text */
.thover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    z-index: 10;
}
h2>a:hover>span:first-child {
    position: relative;
    z-index: 9999;
    color: white !important;
}
.thover {
    position: absolute;
    width: 0;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    z-index: 10;
    transition: all 0.3s;
}
h2 a:hover .thover {
    width: 100%;
    transition: all 0.3s;
}

 

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
7 hours ago, tuanphan said:

Hi,

Remove above code & follow these steps

Step 1. Add a Code Block >> Paste this code


<h2 class="hover-text">Aditya is an <a href="#photographer"><span>independent photographer</span><span class="thover"></span></a> and <a href="#writer"><span>writer</span><span class="thover"></span></a> with a focus on documenting culture and identity, often through the lens of nostalgia.</h2>

Step 2. Add this to Design > Custom CSS


/* hover text */
.thover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    z-index: 10;
}
h2>a:hover>span:first-child {
    position: relative;
    z-index: 9999;
    color: white !important;
}
.thover {
    position: absolute;
    width: 0;
    height: 100%;
    background: black;
    left: 0;
    top: 0;
    z-index: 10;
    transition: all 0.3s;
}
h2 a:hover .thover {
    width: 100%;
    transition: all 0.3s;
}

 

Thanks for the code! I followed all the steps you mentioned above. However, the black background applies to the full body of text too, thus making it invisible. It only needs to apply to just the anchor link text, how can I fix that please? Screenshot attached.

722124811_Screenshot2021-06-10at1_21_12PM.thumb.png.867221de0a88c6a6039346aee6f8d1a4.png

Screenshot 2021-06-10 at 1.21.32 PM.png

Link to comment
On 6/10/2021 at 1:27 PM, sastavangogh said:

Thanks for the code! I followed all the steps you mentioned above. However, the black background applies to the full body of text too, thus making it invisible. It only needs to apply to just the anchor link text, how can I fix that please? Screenshot attached.

722124811_Screenshot2021-06-10at1_21_12PM.thumb.png.867221de0a88c6a6039346aee6f8d1a4.png

Screenshot 2021-06-10 at 1.21.32 PM.png

Could you help me fix this glitch please @tuanphan? Thanks so much

Link to comment
1 hour ago, sastavangogh said:

Could you help me fix this glitch please @tuanphan? Thanks so much

Don't remove any code in your current code.

Add this to Design > Custom CSS

h2.hover-text a {
    position: relative;
}

 

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.