Dropdown Menu colour Squarespace 7.1

OK- it must be me! it's not working. Here's what I did below.

9 hours ago, heller said:

OK- it must be me! it's not working. Here's what I did below.

 

Add to HOME> DESIGN> CUSTOM CSS

ahhhh!!! hang on!

i think i'm losing my mind! lol i can't get it to work. I have it in the right place now! but nothing is happening.

The custom css is a good fix, but there should be a way to style drop down menus (background color, fonts, spacing) without custom CSS - like you could in 7.0. Does anyone know if this is something that will be added to 7.1 (or is currently available and I can't find it)? There seems to be so much basic customization missing from this version of the platform.

Thank you!

16 hours ago, heller said:

i think i'm losing my mind! lol i can't get it to work. I have it in the right place now! but nothing is happening.

I see it worked here?

14 hours ago, raeroshow said:

The custom css is a good fix, but there should be a way to style drop down menus (background color, fonts, spacing) without custom CSS - like you could in 7.0. Does anyone know if this is something that will be added to 7.1 (or is currently available and I can't find it)? There seems to be so much basic customization missing from this version of the platform.

Thank you!

Home > Design > Colors > Edit Default Theme Palette

On 5/6/2020 at 4:41 AM, tuanphan said:

I see it worked here?

Home > Design > Colors > Edit Default Theme Palette

I think  only partially. i'm trying to get the item i select to turn the hot pink, not just when i'm on it - does that make sense? Thanks so much for all your help! You're the best.

actually, i might have just figured it out thanks to you!

Hi,

I seem to be having a similar problem. I wish for my drop down menu to have a different colour, however this is my choosen default colour of font. I cant seem to figure out how to change the colour of the font to white when the links drop down.

.header-nav-folder-content {
   background: #f2cf70 !important; 
}

2 hours ago, Letetia said:

Hi,

I seem to be having a similar problem. I wish for my drop down menu to have a different colour, however this is my choosen default colour of font. I cant seem to figure out how to change the colour of the font to white when the links drop down.

.header-nav-folder-content {
   background: #f2cf70 !important; 
}

Can you share link to your site?

@tuanphan, It seems like everyone already figured this out, but I am trying to make the dropdown left aligned rather than right aligned.

I found this css code:
 

.header-nav-folder-item {text-align: left !important;}

And this was the result:

As you can see, the text is left aligned, but the box itself is right aligned to the main navigation heading.

Do you know how to make it so the background box is also left aligned?

Thank you!!

9 hours ago, Hana said:

@tuanphan, It seems like everyone already figured this out, but I am trying to make the dropdown left aligned rather than right aligned.

 

Difficult to help without checking url

Hi everyone!
@tuanphan I have the same problem with dropdown right aligned on the main navigation.
Please, help to align to the left like a text
Attached my screenshot

2 hours ago, Iryne said:

Hi everyone!
@tuanphan I have the same problem with dropdown right aligned on the main navigation.
Please, help to align to the left like a text
Attached my screenshot

 

Difficult to help without checking url

@tuanphan https://www.festivalforthefuture.co/
Thanks in advance :)

14 hours ago, Hana said:

@tuanphan https://www.festivalforthefuture.co/
Thanks in advance :)

Add to Home > Design > Custom CSS

.header-nav-folder-item {
    text-align: left;
}

Hi tuznphan,

I am having the same issue. The code you mention above left aligns the text but not the background of the dropdown. In the attached screenshot I am showing you the dropdown for Resources which is still right aligned with the top nav. TY in advance!!

Hi I need help! I am trying to make my navigation bar drop down transparent on just the home screen. Thank you in advanced! @tuanphan

10 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-folder-item {
    text-align: left;
}

 

Thanks @tuanphan
I used that code and that works to make the text left aligned, but the box itself is still right aligned to the main navigation header. So this is what it looks like:

And this is (a photoshopped version of) what I want it to look like:

does that make sense?

I think @AtomicTangerine and @Iryne are also having the same problem as me 😞

On 5/14/2020 at 4:39 AM, Hana said:

@tuanphan https://www.festivalforthefuture.co/
Thanks in advance :)

5 hours ago, meltyogastudio said:

Hi I need help! I am trying to make my navigation bar drop down transparent on just the home screen. Thank you in advanced!

12 hours ago, AtomicTangerine said:

Hi tuznphan,

I am having the same issue. The code you mention above left aligns the text but not the background of the dropdown. In the attached screenshot I am showing you the dropdown for Resources which is still right aligned with the top nav. TY in advance!!

Add to Home > Design > Custom CSS

.header-nav-folder-content {
    left: -1em !important;
    right: auto !important;
    text-align: left !important;
}

2 hours ago, tuanphan said:

 

 

Add to Home > Design > Custom CSS

.header-nav-folder-content {
    left: -1em !important;
    right: auto !important;
    text-align: left !important;
}

 

THANK YOU!!!! This did the job!
You are amazing!!

11 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-folder-content {
    left: -1em !important;
    right: auto !important;
    text-align: left !important;
}

 

Thank you so much @tuanphan! That did the trick!

Is there a way to control the width of that folder content box?

20 hours ago, AtomicTangerine said:

Thank you so much @tuanphan! That did the trick!

Is there a way to control the width of that folder content box?

.header-nav-folder-content {
    left: -1em !important;
    right: auto !important;
    text-align: left !important;
	width: 200px !important;
}

Thank you @tuanphan for the code for align of navigation...😃
It works!

Hi, @tuanphan

I want ask you.
I want to add an arrow icon (dropdown icon near "Learn more" item) in navigation bar
Because in my wireframe it was look like...(add attachment below)


Question to you:
Could I added this icon? Maybe I could fixed it after the launch the website?