Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Dropdown Menu remove colour and change width, Squarespace 7.1


Question

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

24 answers to this question

Recommended Posts

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

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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
  • 0
Posted (edited)
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
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
Posted (edited)
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
  • 0
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
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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