Change Navigations Style on Mobile

Site URL: http://contino.squarespace.com

Hi there, 

I'm customizing my template, but I've noticed that on mobile the "native" template activates the Navigation bar which is something I don't want: 

I would like that on mobile the nav is displayed like this: 

Can you please help me in showing the nav menu like this? 

Thanks a lot

Andrea

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
nav.main-nav ul {
    display: block !important;
}
select#mobileSelect {
    display: none;
}
#navBlock nav:after {
    opacity: 0 !important;
    visibility: hidden !important;
}
}

9 minutes ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
nav.main-nav ul {
    display: block !important;
}
select#mobileSelect {
    display: none;
}
#navBlock nav:after {
    opacity: 0 !important;
    visibility: hidden !important;
}
}

 

Hi there! It worked! I do still see the "v" arrow for the nav bar tough. Is there a way to remove that?

Plus is there a way to reduce the nav font on mobile?

Thanks

17 hours ago, Contz said:

Hi there! It worked! I do still see the "v" arrow for the nav bar tough. Is there a way to remove that?

Plus is there a way to reduce the nav font on mobile?

Thanks

Use this new code

@media screen and (max-width:767px) {
nav.main-nav ul {
    display: block !important;
}
select#mobileSelect {
    display: none;
}
#navBlock nav:after {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* nav font */
nav.main-nav * {
    font-size: 10px !important;
}
}

With arrow, I see you solved?

7 hours ago, tuanphan said:

Use this new code

@media screen and (max-width:767px) {
nav.main-nav ul {
    display: block !important;
}
select#mobileSelect {
    display: none;
}
#navBlock nav:after {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* nav font */
nav.main-nav * {
    font-size: 10px !important;
}
}

With arrow, I see you solved?

Yes! Super thanks so much for your support!

Do you know a way to change part of the text, like "July" or "Comments" in another language?

Since all the site is in Italian while those remained in English.

Thanks again!

22 hours ago, Contz said:

Yes! Super thanks so much for your support!

Do you know a way to change part of the text, like "July" or "Comments" in another language?

Since all the site is in Italian while those remained in English.

Thanks again!

Which template do you use? I need to test some code.

(Also, this will require a Business Plan or higher)

With date, you can consider change date text to number, with this CSS

time.published:after {
    content: attr(datetime);
    font-size: 20px;
}
time.published {
    font-size: 0;
}

7 hours ago, tuanphan said:

Which template do you use? I need to test some code.

(Also, this will require a Business Plan or higher)

I'm using the "Native" template. I have a permanent free account since I won a contest with them 

4 hours ago, Contz said:

I'm using the "Native" template. I have a permanent free account since I won a contest with them 

Your plan is personal or business or commerce?

4 hours ago, tuanphan said:

Your plan is personal or business or commerce?

personal

2 hours ago, Contz said:

personal

Hi. Not possible with Personal Plan. You can consider hiding it, add a new text instead. However, with this method, it will not be possible to display the number. For example Comments (2), will only be able to display Comments [new language]

And, can't translate date/month

On 7/14/2022 at 11:18 AM, tuanphan said:

Hi. Not possible with Personal Plan. You can consider hiding it, add a new text instead. However, with this method, it will not be possible to display the number. For example Comments (2), will only be able to display Comments [new language]

And, can't translate date/month

Thanks so much!

One last question, do you know why I can change the search output font and color when it doesn't find anything on my site? 

https://gwtf.it/search?q=Iphone Homescreen&f_collectionId=62c932157e4961711a8f62f3

I am using this: 

sqs-search-page-notice {
  color: #b4b4b4 !important;
  font-size: 20px !important;
}

But it stays black and with a different font 😞

19 hours ago, Contz said:

Thanks so much!

One last question, do you know why I can change the search output font and color when it doesn't find anything on my site? 

https://gwtf.it/search?q=Iphone Homescreen&f_collectionId=62c932157e4961711a8f62f3

I am using this: 

 

sqs-search-page-notice {
  color: #b4b4b4 !important;
  font-size: 20px !important;
}

 

But it stays black and with a different font 😞

Use this 

.sqs-search-page-notice {
    color: white !important;
    font-size: 20px !important;
}

1 hour ago, tuanphan said:

.sqs-search-page-notice {
    color: white !important;
    font-size: 20px !important;
}

Unfortunately, it doesn't change... 😞

On 7/18/2022 at 5:27 PM, Contz said:

Unfortunately, it doesn't change... 😞

 

Try adding this to Settings > Advanced > code Injection > Header

<style>
  .sqs-search-page-notice {
    color: white !important;
    font-size: 20px !important;
}
</style>