Customizing font setting in Navigation Inline

[juanajaafar]

Hi, I’m including the Navigation Inline element in a draft for my Home page. I want to adjust the font case setting from sentence case to all uppercase. I also want to adjust the font weight to 100. How can I do this?

[Prasant]

Hello Jaafar,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    font-weight: 100;
    text-transform: uppercase;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[juanajaafar]

Hi. Please see the circled section in the image below. This is a draft post.

The code you gave above tweaks my top nav menu. What I’d like to adjust is the circled INLINE (Cornerstone element) menu without affecting the current setting of my top nav menu.

[nabeel]

Hi again,

Sorry for the confusion, you can adjust the Font Weight and Text Transform settings via Navigation Inline element’s settings. Inspect your Navigation Inline in Cornerstone and click on Top Links

Under Primary Text Format adjust the Font Weight to 100 and under Primary Text Style select Text Transform to be Uppercase (the first option i.e TT)

Hope this helps!

[juanajaafar]

Hi. I’m afraid ‘Top Links’ doesn’t exist at my end. I only have Navigation Inline > Content > Design > Customize. The option for ‘Primary Text Format’ therefore, doesn’t exist.

[nabeel]

Hi,

You need to enable Advanced option for it to show up (see screenshot)

Let us know how this goes!

[juanajaafar]

Got it! Thank you.

[Prasant]

You are most welcome.