Navbar Font

[marenelizabethphoto]

Hey, Here is my site URL for reference: blog.marenelizabethphotography.com

I’m trying to change my navbar font to google font Barlow Condensed (necessary because for some reason it doesn’t show up in the customizer where one can usually change the navbar font even though lots of other google fonts do).

I’ve use @import on my child theme to install the font (see below):

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed');

Then I added this code that I found in another thread to my custom css:

.x-nav a { font-family: 'Barlow Condensed', sans-serif; }

But its not working.

I’ve also tried the following code that I’ve found in other threads:

.x-navbar { font-family: avenir next, helvetica, alto, century gothic, sans-serif; }

and

.x-navbar .x-nav > li > a { font-family: “insert the font here”; }

(with my font swapped out with the defaults obviously)

Please help. Why aren’t these codes working for me because a lot of other people seemed to have great success with them.

I am also using this code in the custom css to achieve the split navigation logo in line with text effect that you can see on my site:

@media (min-width: 980px) { .x-logobar { display: none !important; visibility: hidden !important; } .x-navbar .desktop .x-nav > li.logo-menu-item > a { text-indent: -99999px; text-align: left; width: 306px; height: 62px; background: url(http://blog.marenelizabethphotography.com/wp-content/uploads/2018/02/MARENELIZABETHwith-heart2.png) no-repeat center center; background-size: contain; } }

While we’re at it. is there a way I could make the menu text (ABOUT, EXPERIENCE, ETC.) Middle aligned with my logo?

Thanks!

[ruenel]

Hello There,

Thanks for writing in!

1.) Please understand that the hierarchy of the styles being applied to the site is this:

• Theme stack style.css
• Child theme’s style.css
• WP Additional CSS
• Theme Option settings
• Theme Option’s custom css
• Cornerstone’s page css

Most probably, your custom css were overridden by the theme option settings. In the first place, you can assign the font family for the menu items in X > Launch > Options > Header > Links - Text. Please check out this option and assign the appropriate font family. If in case the font manager is enabled, you must apply create a font first in X > Launch > Templates > Fonts. To know more about font manager, please check this out:
https://theme.co/apex/forum/t/managers-fonts/101

2.) To align the menu items vertically with your logo, please increase the Navbar Top Link Alignment in X > Launch > Options > Header > Links - Alignment > Navbar Top Link Alignment to at least 30px or more.

Hope this helps. Please let us know how it goes.

[marenelizabethphoto]

Thanks for the help!

center aligning worked perfect, thanks!

the font change would probably work great except I go to create the font template and the font I want isn’t in the list even though its a google font. Its called Barlow Condensed and as you can see its missing.

Any ideas?

Thanks in advance!

[paul.r]

Hi,

Yes, it’s not a complete list.

I will forward this as a feature request.

For the mean time, you can add the font manually by adding the code below in Appearance > Customize > Additional CSS

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,400i,700');

You can then use that font by adding the code below in Inline CSS or style field of your elements.

font-family: 'Barlow Condensed', sans-serif;

Thanks