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?

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

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

Hi, please share the website link and password if applicable 

On 3/5/2022 at 7:05 PM, Jia said:

Hi, please share the website link and password if applicable 

www.stuffbystink.com

password: swagger

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

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)

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)

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

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 🙂

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