Streaming live at 10am (PST)

Elements being styled by classes not available in the style manager


#1

I have an issue where for some elements on the site - its pulling a CSS style that I cannot see in the style manager.

Here is the published link to my site: https://www.inspri.co/
And here is the designed read only link: https://preview.webflow.com/preview/inspri?preview=027d6cc62e502fdccf28d80f42664b76

When you load the site you will notice that the main heading flickers from a sans-serif font to Playfair (screenshot below).

And the selected link in the navbar shows blue. This should be teal.

This is driving me crazy. Help please!!


#2

Hi @Astha,

Thanks for posting about this! Can you try to download the font from Google, then upload it as a custom font?

Let me know if this solves the issue - If not I’m happy to help further.


#3

Hi @Nita - I will definitely try and upload the banner font and let you know what happens.

Do you know why the Navlink is showing blue instead of teal?

Thanks!
Astha


#4

Hi @Nita,

Turns out I had already uploaded Playfair (see screenshot).

I really appreciate your help in figuring this out,
-A


#5

Hi @Astha

Just a quick reply on the Navlink issue - it looks like it was a default blue maybe? So just click into the symbol, select the navlink and go to ‘typography’ to give it a new colour to override the default.


#6

@StuM - thank you for being willing to troubleshoot this with me.

The ‘Nav Link’ is styled. See screenshot. Its styled to be teal when in the focused state and gray otherwise.

But when you inspect the elements its pulling from a style that I don’t even see in the style manager:
image

I’m sure i’m doing something really silly here - just don’t know what it is!
-A


#7

Hi @Astha

No problem, i’ve just checked that out, and that blue colour 0082f3 is the same as the default ‘Nav / Current’ styling that comes with a Webflow Navbar.

I dropped in a Navbar into an empty project, linked Home to the Home page, and it changed automatically to that blue colour. To override it just go down to the typography colour and give it a new colour.

I also took the colour code, and styled the non-current ‘About’ nav link with that colour code - as you can see it’s an exact match, so that’s where your mystery colour must be coming from :slightly_smiling_face:

Hope that makes sense, let me know if not.

My example:

Home%20Current%20-%20About%20Styled

Triple clicking into your Navbar symbol to select ‘Home’ shows ‘Current’ as well - just change this typography colour.


#8

That did the trick. THANK YOU, THANK YOU!

Turns out in the ‘current state’ the typography color was showing as ‘gray’ (inherited from Body) in the style panel - but then pulling in the default webflow nav style on publishing. Thank you for helping me wrap my head around that.

Any ideas on my flickering font issues?

Thank you again,
-A


#9

Ah…might be able to help with that too!

I think you might have misinterpreted @Nita regarding uploading the font.

From your screenshot it looks like you have selected the font from the list of Google Fonts in the Webflow dashboard?

What I think Nita was suggesting is to remove it from that list, and instead go to Google and download the font to your desktop, then literally upload it as a ‘custom’ font in that same tab area of the dashboard.

See if that makes a difference :slightly_smiling_face:


#10

Yay!! Resolved :slight_smile:

You made my day!!
-A


#11

:tada: Result! Glad to hear it!

@Nita I’ll move this over to Design Help