Hello

I have tweaked the CSS code ever so slightly on this top bar menu.I would like to change the text to grey and have less space between the lines when the menu opens.Can someone please help?

Thanks so much!Ana

This is the current code:@media only screen and (max-width: 800px) { #mobileMenuLink li.active-link a { visibility:hidden; } #mobileMenuLink li.active-link a:after { visibility: visible; font-family: 'squarespace-ui-font'; font-size: 2em; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\e030"; text-align: right; display: inline-block; vertical-align: right; margin-right: -10px; margin-top: -0px; color: #808080; } #header { height: 80px; width: 100%; margin-left: -20px; position: fixed; background-color: #ffffff; margin-top: -20px; } #logo { margin-top: 14px; margin-left: 20px; }

    #mobileNav nav.mobile-nav ul {  

margin-top: -15px; } #mobileNav.menu-open { position: fixed; width: 100%; z-index: 10; height: 290px !important; margin-top: 50px;
background-color: #ffffff; -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */ } }

This is the website, please visualise in mobile mode.

https://tambourine-algae-4xn6.squarespace.com/config/design

Thanks so much!Ana

We need the password to check the site.

Sorry!brunoro19

Where did you find the above code?

After removeing

color: rgba(237,237,237,.7);

and adding

@media only screen and (max-width: 800px)

mobileNav .active-link a {

color: black !important;

}

The site became https://imgur.com/a/nu1vAik

I found it somewhere in the Squarespace forum and was able to change a couple of things on my own :) Feel very proud as I have never done this before.

The screenshot you sent looks great.The only thing is that CV is too close to Interiors. Is there a way to have the same space between the lines on all titles?

Also, I cannot find color: rgba(237,237,237,.7);Is that in the code I sent? I can't find it for some reason!Thank you

If you can not find that add

@media only screen and (max-width: 800px){   
mobileNav a { 
[code]color: #6c6e75 !important;<br>

}
a[href=/curriculumvitae] {
margin-top: 13px;
}
}
[/code]

I think this will help.

@jahanggir That is PERFECT thank you!

The only problem now is that on the laptop/computer version when I scroll down I get a weird menu coming down and also I get a very big margin on the top.

https://tambourine-algae-4xn6.squarespace.com/config/designpassword: brunoro19

This is the code as it stands:

@media only screen and (max-width: 800px) { #mobileMenuLink li.active-link a { visibility:hidden; } #mobileMenuLink li.active-link a:after { visibility: visible; font-family: 'squarespace-ui-font'; font-size: 2em; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\e030"; text-align: right; display: inline-block; vertical-align: right; margin-right: -10px; margin-top: -0px; color: #808080; } #header { height: 80px; width: 100%; margin-left: -20px; position: fixed; background-color: #ffffff; margin-top: -20px; } #logo { margin-top: 14px; margin-left: 20px; }

    #mobileNav nav.mobile-nav ul {  

margin-top: -15px; } #mobileNav.menu-open { position: fixed; width: 100%; z-index: 10; height: 290px !important; margin-top: 50px;
background-color: #ffffff; -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */ } }@media only screen and (max-width: 800px){

mobileNav a {

color: #6c6e75 !important;}a[href=/curriculumvitae] {margin-top: 13px;}}

Thank you so much

@AnaRachel, These are quick fixes.

/* To  eleminate the gap between Interior and CV / 

.main-nav+.main-nav { 
margin-top: 0; 
}  

/ To  have same font size in all nav-menu items */ 

.main-nav#secondaryNavigation a{ 
   font-size: 16px !important; 
} 

@jahanggir Thanks for your help.However, on the desktop version I am having a weird thing happening to the menu when I scroll down, it seems like a new menu comes on top of the menu. And also I get a very big gap on the right between images and top of page.Any ideas?Very much appreciated.Best wishes,Ana

Hi @jahanggir

I am trying to reduce the line spacing on the mobile navigation menu using Wells theme.

Have been trying for hours - would you be able to suggest a code?

Thanks!