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

Change colour text and space between lines on Wells mobile menu

Question

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

Edited by AnaRachel
Initial Revision

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0

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.

Edited by jahanggir
Initial Revision

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

screenshot-2019-09-26-at-092208.png.5e22c40e3919b0aac532eedbef2efab1.png

Share this post


Link to post
  • 0

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!

 

 

Share this post


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