Dropdown Menu remove colour and change width, Squarespace 7.1

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

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

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.

@sastavangogh Add to Design > Custom CSS

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

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.

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

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? 

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

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?

You mean make underline effect run from left to right?

15 hours ago, tuanphan said:

You mean make underline effect run from left to right?

yes!

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

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!

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;

}

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!

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!

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?

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

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

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)?

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

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.

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.

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

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

23 hours ago, tuanphan said:

Don't remove any code in your current code.

Add this to Design > Custom CSS

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

 

Amazing, this solved my issue!! Thanks 🙂