Change X mobile menu and mobile submenu font attributes

Support
#1

The price we pay when we do something artistic…

realhdr.com is the dev site. The desktop nav bar uses the Permanent Marker google font I finally got to import. It looks good on the “painter’s tape” graphic on the large desktop, but it inherits down to the mobile menu and submenu and is too hard to read.

I changed the desktop submenu to be Permanent Marker with this:

/* Change desktop submenu text attributes */
.desktop .sub-menu{
font-size: 18px;
letter-spacing: 0.27em;
font-weight: bold;
font-family: “permanent marker”;
}

and now I need to override BOTH the mobile menu and mobile submenu to use Open Sans font that’s White with mouseover Black. The mobile submenu font-size will be the same as the mobile menu font-size (15px i think - I’ll change it). I thought I just needed to replace the .desktop with .x-nav, but that was a flawed assumption.

Thanks as always. Ya’ll (a Southern US contraction for You All) are lifesavers and I’m glad to pay my support money!

Alan

#2

Hi There,

Please remove your custom CSS and add this CSS instead:

.x-navbar .mobile .x-nav li a {
    font-family: "Permanent Marker",handwriting;
    font-size: 18px;
    letter-spacing: 0.27em;
}
#3

Thanks. I had to leave the first bit in place because removing it changed the text on the desktop submenu.

I appreciate your help!

#4

You’re always welcome Alan!

Cheers.

#5

When trying the code out, it didn’t work for me. In another thred I found the following code:

.x-navbar .desktop .sub-menu a {
font-family: “Hammersmith One”;
font-size: 12px;
}

What would this be for the mobile If I want to replicate the sub-menu font family and size?

#6

Hello Samantha,

Thanks for updating this thread.

You can use this code to resolve your issue:

@import url('https://fonts.googleapis.com/css?family=Hammersmith+One&display=swap');

.x-navbar .desktop .sub-menu a {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 12px;
}

.x-navbar .mobile .sub-menu a {
  font-family: 'Hammersmith One', sans-serif;
  font-size: 12px;
}

You will first need to load the font file so that it will work.

#7

What do you mean by load the font family? Hammersmith One is an option under Typography already?

#8

Hi Samantha,

In that case, you can remove this line:
@import url('https://fonts.googleapis.com/css?family=Hammersmith+One&display=swap');

Add only the

.x-navbar .desktop .sub-menu a {
  font-family: "Hammersmith One", sans-serif;
  font-size: 12px;
}

.x-navbar .mobile .x-nav li>a {
  font-family: "Hammersmith One", sans-serif;
  font-size: 12px;
}

Hope it helps,
Cheers!