Changing font of one menu item

[nomad_jess]

Hi there,

I'd like to make some changes to my top navigation menu.

I'd like the first menu item (which is the title of my site) to be left-aligned as it is now, but a different font. I'd like the other three top navigation menu items to be right aligned with the existing font.

Could you please help me out with the CSS for this?

Many thanks in advance!

Jess

http://notesofnomads.com

[Lauren @ OnceCoupled]

You may want to re-order your menu items so they appear in the correct direction on the right:

.nav-secondary .genesis-nav-menu li {
    float: right;
}

.nav-secondary .genesis-nav-menu li:first-of-type {
    float: left;
}

.nav-secondary .genesis-nav-menu li:first-of-type a {
    font-family: Arial;
}

Cheers!
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[nomad_jess]

Thank you, Lauren! That's perfect!

I'm now just wanting to reduce the size and unbold the menus items to the right so they don't stand out as much.

I've been trying with the following code, but the menu items have remained unaffected.

.nav-secondary .genesis-nav-menu li {
font-family: 'Amatic SC';
font-size: 10px;
float: right;
font-weight: 400;
text-transform: uppercase;
}

Any help would be greatly appreciated.

Kind regards,

Jess

[Lauren @ OnceCoupled]

Hey Jess! Sorry for the slow reply. I haven't been very active on the forums recently. You're always welcome to email me directly, too.

You actually need to target the styling of the link itself, not just the list item holding it. You'd want something like:

.nav-secondary .genesis-nav-menu li a {
    font-family: 'Amatic SC';
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[nomad_jess]

Thank you so much, Lauren!

That worked perfectly!

[Author]

Posts