Jump to content

How do I change the size of a Custom CCS Font applied to my site header? And how do I apply the same drop down icon on my desktop that is present on my mobile view?

Recommended Posts

I used this code to apply my custom font to the site header page options. I'd like to make it smaller - roughly the same as the 'get in touch'

 

you can see on the mobile view particularly that it's too big.

 

I'd also like to use the same drop down menu navigation system as the mobile option (the +) so that on my desktop view, there is just my logo 'STINK." the '+' to the left of it (on lefthand side of screen) and then the little icons to the right.

 

thankyou so much

issy

Screen Shot 2022-03-05 at 4.39.28 pm.png

Screen Shot 2022-03-05 at 4.41.22 pm.png

Screen Shot 2022-03-05 at 4.43.02 pm.png

Link to comment
  • Replies 7
  • Views 332
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, isobeleastwood said:

I used this code to apply my custom font to the site header page options. I'd like to make it smaller - roughly the same as the 'get in touch'

 

you can see on the mobile view particularly that it's too big.

 

I'd also like to use the same drop down menu navigation system as the mobile option (the +) so that on my desktop view, there is just my logo 'STINK." the '+' to the left of it (on lefthand side of screen) and then the little icons to the right.

 

thankyou so much

issy

Screen Shot 2022-03-05 at 4.39.28 pm.png

Screen Shot 2022-03-05 at 4.41.22 pm.png

Screen Shot 2022-03-05 at 4.43.02 pm.png

Hi, please share the website link and password if applicable 

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
9 hours ago, isobeleastwood said:

www.stuffbystink.com

password: swagger

Hi, add this code to custom css. Let me know how it goes 🙂

.header-menu-nav-item a {
  font-size:22px;
}

.header-nav-item a {
  font-size:14px;
}

@media screen and (min-width:768px) {
  .header-nav {
    display: none;
  }
  .header-burger {
    display: flex;
    margin-right:50px;
  }
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
}

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment

Hey Jia,

Wow. You are a wizard hahaha. Thankyou!

It worked great, only a couple of fix ups.

1. The menu pops up on the right side in the desktop view, rather than under the cross (which is on the left). Is there a way to make it so that the menu opens underneath the left side? (on desktop view only - mobile is sweet, it just takes up the whole page anyhow!)

2. Is there a way to make the instagram icon a bit larger on the mobile view?

3. Is there a way to make the category headings on the mobile view like example a, rather than example b (black background image)

Screen Shot 2022-03-08 at 9.48.59 am.png

Screen Shot 2022-03-08 at 9.44.51 am.png

Link to comment
9 hours ago, isobeleastwood said:

Hey Jia,

Wow. You are a wizard hahaha. Thankyou!

It worked great, only a couple of fix ups.

1. The menu pops up on the right side in the desktop view, rather than under the cross (which is on the left). Is there a way to make it so that the menu opens underneath the left side? (on desktop view only - mobile is sweet, it just takes up the whole page anyhow!)

2. Is there a way to make the instagram icon a bit larger on the mobile view?

3. Is there a way to make the category headings on the mobile view like example a, rather than example b (black background image)

Screen Shot 2022-03-08 at 9.48.59 am.png

Screen Shot 2022-03-08 at 9.44.51 am.png

Hahahaha happy to help! Here's the code for the fixes:

@media screen and (min-width:768px) {
  .header-menu-nav-folder-content {
    text-align:left;
  }
  .header--menu-open .header-menu .header-menu-cta {
    text-align:left;
    padding-left: 1vw;
  }
  .header-overlay-alignment-right .header-menu-actions {
    justify-content:flex-start;
    padding-left:5vw;
  }
  .header-menu-actions {
    margin-bottom:0vw;
  }
}

@media screen and (max-width:768px) {
  .icon {
    width:40px !important;
    height:40px !important;
  }
}

About #3, it's showing up the way you want it on my end, but it's up to the font size, you'll have to make it smaller. If you'd like to change it, edit the font-size:22px in this part of the code I sent previously:

.header-menu-nav-item a {
  font-size:22px;
}

 

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
On 3/8/2022 at 7:48 PM, Jia said:

Hahahaha happy to help! Here's the code for the fixes:

@media screen and (min-width:768px) {
  .header-menu-nav-folder-content {
    text-align:left;
  }
  .header--menu-open .header-menu .header-menu-cta {
    text-align:left;
    padding-left: 1vw;
  }
  .header-overlay-alignment-right .header-menu-actions {
    justify-content:flex-start;
    padding-left:5vw;
  }
  .header-menu-actions {
    margin-bottom:0vw;
  }
}

@media screen and (max-width:768px) {
  .icon {
    width:40px !important;
    height:40px !important;
  }
}

About #3, it's showing up the way you want it on my end, but it's up to the font size, you'll have to make it smaller. If you'd like to change it, edit the font-size:22px in this part of the code I sent previously:

.header-menu-nav-item a {
  font-size:22px;
}

 

Looks great Jia!

Thanks so much!

I might just actually remove the instagram icon from the drop down menu, just because its already up the top.. Is there a way to do this for only the desktop view? It's fine to stay on the mobile 🙂

Link to comment
31 minutes ago, isobeleastwood said:

Looks great Jia!

Thanks so much!

I might just actually remove the instagram icon from the drop down menu, just because its already up the top.. Is there a way to do this for only the desktop view? It's fine to stay on the mobile 🙂

Here's the code:

@media screen and (min-width: 768px) {
  .header-menu-nav .icon {
    display:none;
  }
}
Edited by Jia

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.