[Support request] adding a star on between primary navigation items

[Kimberly]

I would like to add a star as a separator between navigation buttons. Is there a way to do this with css?

[David]

Hi there,

you could try some CSS:

@media (min-width: 769px) {
    .main-navigation li {
        position: relative;
        display: inline-flex !important;
        align-items: center;
    }
    
    .main-navigation li:not(:first-child):before {
        content: '\2605';
        color: #fff; /* Change star color */
        font-size: 0.6em;
    }
}

The content: '\2605'; is what outputs the star – this is a HTML symbol you can see here:

https://www.toptal.com/designers/htmlarrows/symbols/black-star/

[Kimberly]

That partially worked. The star shows up above the menu item instead of between.

Unrelated to that, I am trying to embed a non-google font. I have it uploaded and have figured out how to use the font with css. But how do I get it to show up on the menu of typography so I can select it instead of using css?

http://www.wildcatgems.com

[David]

I edited the CSS above so they should now be inline.

This part of our docs explains how to use a PHP filter to add the local font to the customizer:

https://docs.generatepress.com/article/adding-local-fonts/#adding-it-to-the-customizer

[Author]

Posts