How can I alter the header logo and menu font on my site?

Store Design
,
1

Hello guys, at this page:

https://bioacquabeauty.com/

I need to:

  1. Change the font of the logo in the Header “BioAcqua” to customized font “Big shoulders display” font
  2. change the menu font for all view in “Big shoulders display” font

Thank you

2

Hi @BioAcqua ,

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Thank you makka, what if i want to integrate a custom font uploaded on shopify with address https://cdn.shopify.com/s/files/1/0701/4927/5916/files/Fontspring-DEMO-integralcf-bold.otf?v=1698247351 ?

Thank you

4

Do you want to add this font to header logo and menu?

5

yes wanna try how it looks :smiley:

6

Hi @BioAcqua ,

Replace the previous code with this one.
7

Hello Makka it looks muche better.

How ever I need to modify the menu and the sub menu font size to make it well visible on desktop as well on mobile.

Can you help me on this?

Thank you.

8

Hi @BioAcqua ,

Can you let me know what needs to be adjusted?

9

also the submenu font size on desktop and mobile layout :smiley:

10

Hi [email removed] @BioAcqua

Please add below code to reduce submenu font size on desktop and mobile.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

<style>
.header__submenu  .header__menu-item.header__menu-item {
    font-size: 14px !important;
}

.menu-drawer__inner-submenu .menu-drawer__menu.list-menu li * {
    font-size: 15px !important;
}
</style>
11

Thank you but this doesn’t change the fontsize on sub menu on desktop mode (it does in movile view instead)…

so basically i need to manage
MENU HEADER

SUB MENU HEADER

Schermata 2023-11-01 alle 15.49.53.png
Schermata 2023-11-01 alle 15.49.53.png822×1016 52.4 KB

SUB-SUB MENU HEADER

on both latop and mobile layout…

12

Have you added the latest CSS? I added it on my end and the CSS is working.

makkaomakka_0-1698851093258.png
makkaomakka_0-1698851093258.png1242×602 493 KB

13

It works thank you let’s keep in touch maybe ai need some job for you in the future!

14

Thank you @BioAcqua

I have send you a PM

15

Hello makka, i need to remove the color change on mouse over on header title (which is the name of the store). I just want the name simply white, can you help me to remove the mouse over color change please?