Highlighted
Scholar

Customized font of navigation toolbar

Hello everyone,

 

I've started using Weebly resently for my art portfolio website and it's coming along quite well, but now I'm stuck on some details I need your help with:

 

- is there a way to change the font of just ONE rider in the navigation toolbar?

Specifically I would like the change the font of "cycles" in my nativation toolbar (www.theresaboden.com).

 

I'm aware this probably needs some twitching in the HTML/CSS codes, but even though I'm a newby, I'm open for all crazy ideas.

 

Thanks a lot,

Theresa

3 REPLIES
Scholar

Re: Customized font of navigation toolbar

For example I just saw that google offers different fonts and their code to include in a website build up.

 

For example: Font Barrio

 

<style>
@import url('https://fonts.googleapis.com/css?family=Barrio');
</style>

 

font-family: 'Barrio', cursive;

 

Could that be what I'm looking for?

Counselor

Re: Customized font of navigation toolbar

[ Edited ]

Hi @ThBoden,

 

yes you can do this. If you use a browser inspection tool you can find that each item in the menu has it's own unique 'id' code. Then it's a matter of adding the css to that id. For example:

<style>
@import url('https://fonts.googleapis.com/css?family=Barrio');
#pg435133323286789226 .wsite-menu-item {
    font-family: 'Barrio', cursive !important;
}
<style>

will produce this:Screen Shot 2017-05-22 at 1.38.05 PM.png

 

I have a working example on my Demo site: http://mjcsdemo.weebly.com/menu-editing.html

 

Hopefully than gets the results you're after.

 

Cheers, Mark

Counselor

Re: Customized font of navigation toolbar

By the way, @ThBoden

 

The easiest place to add that code is Settings>SEO>Header Code.

 

Cheers, Mark