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

Dropdown Menu colour Squarespace 7.1


Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 81
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

@StephenWise1999 Add to Home > Design > Custom CSS /* Change dropdown menu background */ .header-nav-folder-content { background: #febf00 !important; }

try this .folder .subnav li { background: red !important; }  

Fixed! Thank you so much! I changed it to white as transparent didn't work. Thank you again!!

Posted Images

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.

code 2.png

Link to post

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!

Link to post
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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.

Link to post

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

navigation.jpg

Link to post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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

573253152_ScreenShot2020-05-12at2_34_05pm.thumb.png.6816a36215db971ba8b51bb3ba52f08a.png

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

Link to post
Posted (edited)

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

image.thumb.png.af8da7e5a29616d70df3bd0dfce92540.png

Edited by Iryne
Link to post

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

Screen Shot 2020-05-14 at 9.31.27 AM.png

Link to post
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:

1835752095_ScreenShot2020-05-12at2_34_05pm.thumb.png.d6322f4ad5e74d5c93c29baa40b91e35.png

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

1043135317_ScreenShot2020-05-15at11_24_20am.thumb.png.1699721560d448ac314217a6812c273b.png

does that make sense?

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

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

 

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

Screen Shot 2020-05-14 at 9.31.27 AM.png

Add to Home > Design > Custom CSS

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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!!

Link to post
Posted (edited)
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?

Edited by AtomicTangerine
Link to post
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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

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)


image.thumb.png.4a44a11e9ddbb8f628b08543b9125031.png
Question to you:
Could I added this icon? Maybe I could fixed it after the launch the website?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...