Change font size of items in dropdown menu navigation

Site URL: https://www.drogeogenklinieknederland.nl

Hello,

I would like to change the size of the font of the items in my dropdown menus (which is particularly relevant for the mobile version). I have looked at custom css options, but I can't seem to find the appropriate one. My site uses the Harris template in version 7.0. Does anyone know how to do this?

Thanks!

Add to Home > Design > Custom CSS

div.subnav * {
    font-size: 10px;
}

Great, that works! Thank you very much!

10 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

div.subnav * {
    font-size: 10px;
}

 

Hi there, I would also like to make the drop down navigation font size smaller. I am using the Tresoire template and the main navigation size is 1rem. So ideally the drop downs would be 0.8rem. How would I do this? 

On 2/2/2021 at 7:01 PM, Jess02 said:

Hi there, I would also like to make the drop down navigation font size smaller. I am using the Tresoire template and the main navigation size is 1rem. So ideally the drop downs would be 0.8rem. How would I do this? 

 

 

Can you share site url? We can help easier

Having the same problem on https://gecko-kangaroo-fesb.squarespace.com/

I have tried the CSS - as you will see from the attached

Thank you for your help

9 hours ago, Robertjoseph said:

Having the same problem on https://gecko-kangaroo-fesb.squarespace.com/

I have tried the CSS - as you will see from the attached

 

Thank you for your help

Your CSS for Well or Wexley template

Add this CSS

/* dropdown menu text size */
@media screen and (min-width:992px) {
.container.header-menu-nav-item a {
    font-size: 10px;
}
}

On 5/5/2021 at 3:15 AM, tuanphan said:

Your CSS for Well or Wexley template

Add this CSS

/* dropdown menu text size */
@media screen and (min-width:992px) {
.container.header-menu-nav-item a {
    font-size: 10px;
}
}

 

Thank you

On 5/8/2021 at 5:10 AM, Robertjoseph said:

Thank you

The space between items look huge. Do you want to reduce?

11 hours ago, tuanphan said:

The space between items look huge. Do you want to reduce?

Yes please. I was about to ask!

Also, I asked the question elsewhere but haven't seen a response.
If you look at the home page you'll see a vimeo video that loads well and looks good (I think) on desktop/tablet
On Mobile however. as you can see, it is cropped. Is there a CSS to resize for mobile, please?
And finally(!)
Hopefully a simple question. On Blog2 ('Words' on my menu) the images heading the blogs appear on the gallery. When I add new posts however, this doesn't happen 

Thank you very much for your help

On 5/9/2021 at 10:28 PM, Robertjoseph said:

Yes please. I was about to ask!

Add to Design > Custom CSS

/* Desktop burger item spacing */
@media screen and (min-width:992px) {
.container.header-menu-nav-item a {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
}

With video

Answered your email

Much better, thank you!

Did you have any thoughts about the other two questions in my thread (Blog 2 images and Changing video width on mobile)?
I'd be very grateful!

On 5/18/2021 at 6:56 PM, Robertjoseph said:

Did you have any thoughts about the other two questions in my thread (Blog 2 images and Changing video width on mobile)?
I'd be very grateful!

I think I answered video in another post??

With blog, have you added image here yet?

Thank you

I will look for the video response

re Blog 2

I have this, which does not include 'Options'

Am I missing something?

Heya - I just tried this but it hasn't worked for me - wondering if it's because I also have secondary nav as well as the main nav with dropdowns. Anyone else had this problem?

Thanks!

Hello,

I would also like to tweak the style of my dropdown menu : I would like the dropdown menu items to be Capitalized (not Uppercase like the main navigation menu) and a slightly smaller font size.

Here is the website URL: www.olive-groves.fr

This is the Marta template, Squarespace 7.0

Would anyone be able to assist with Custom CSS?

Thanks!

23 hours ago, CamilleOG said:

Hello,

I would also like to tweak the style of my dropdown menu : I would like the dropdown menu items to be Capitalized (not Uppercase like the main navigation menu) and a slightly smaller font size.

Here is the website URL: www.olive-groves.fr

This is the Marta template, Squarespace 7.0

Would anyone be able to assist with Custom CSS?

Thanks!

 

Add to Design > Custom CSS

a.Header-nav-folder-item {
    text-transform: capitalize;
}

It worked perfectly, thank you so much 😊

Hello,

I'm having this issue as well, none of the previously mentioned CSS codes have worked for my template unfortunately. Im currently using the Mojave template. The drop down menu when you hover over the "Work" navigation is currently so large it's spilling off the page. Is there any code that can fix the width and allow for custom font size and spacing?

My URL is https://www.rileyhowland.com/

Thank you!

On 4/17/2022 at 4:46 AM, rileyhowland said:

Hello,

I'm having this issue as well, none of the previously mentioned CSS codes have worked for my template unfortunately. Im currently using the Mojave template. The drop down menu when you hover over the "Work" navigation is currently so large it's spilling off the page. Is there any code that can fix the width and allow for custom font size and spacing?

My URL is https://www.rileyhowland.com/

Thank you!

Add to Design > Custom CSS

a.Header-nav-folder-item {
    font-size: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
}

On 4/19/2022 at 3:45 AM, tuanphan said:

Add to Design > Custom CSS

a.Header-nav-folder-item {
    font-size: 18px;
    padding-top: 0px;
    padding-bottom: 0px;
}

 

Worked perfectly, you're the best thank you!

Hi there, 

I would really love to adjust (way smaller) the font size of the dropdown in the mobile version of my website: www.customodes.com and I would really love a little more "blanc" space below the "Get Started" button.

Do you have advice? Look forward to hearing from you! 

Cheers,

Joanna

On 5/31/2023 at 5:51 PM, joannatoetenel said:

Hi there, 

I would really love to adjust (way smaller) the font size of the dropdown in the mobile version of my website: www.customodes.com and I would really love a little more "blanc" space below the "Get Started" button.

Do you have advice? Look forward to hearing from you! 

Cheers,

Joanna

You can add this code to Design > Custom CSS

/* Mobile Dropdown Menu */
.header-menu-nav-folder-content * {
    font-size: 14px;
}
.header-menu-cta {
    position: relative;
    top: -50px;
}