Symbol changing styling issue


Hoping someone can help me with a symbol issue I’m having. I’ve created a nav bar in my homepage and made it a ‘symbol’, however when I add it to the about page the styling gets all out of whack.

I thought the whole purpose of creating a symbol was for ease of plopping onto another page with consistency! Can someone please take a peek and let me know what I’m doing wrong, as I’ve searched high and low for an answer and can’t figure it out!?

And it does. What happens on your symbol is expected because of the way you styled its content.

here’s a screen capture taken on your home page:

The link selected is the Brand link, the link to the home page. As we’re on that page, the link gets a green Current combo class. And all of the blue properties labels show that you have styled this element on that combo, which only happens on… home page.

Everyone overlooked this at least once or twice, don’t worry :slight_smile:

you have to be careful when styling links that lead to the page you’re on. The good practice here is to style your navbar before granting the links on the link elements.

Thanks for the quick help Vincent! Ugh, I guess I’ll chalk this off as ‘learning pains’. To be clear, are you suggesting that I basically start the nav bar styling over and then link the Link Block to the homepage? Is this my best course at this point?

Either you do that or you go style your brand link on another page.

I swear, everyone has been there more than one time. :slight_smile:

Lol, ok thank you! :grinning:

Vincent - I’m so beyond frustrated with this. I don’t think I’m quite understanding the ‘why’ I wouldn’t be able to build on any styling after linking the logo. It’s doesn’t make sense to me. There will inevitably be styling changes, additions etc. to be made along the way with building - so having to completely rebuild the nav bar doesn’t seem right to me.

I tried styling the brand link on another page, but then it doesn’t show up in preview.

If I were to completely start over, how can I avoid this problem from reoccurring as I’d like to be able to link the logo for testing purposes before I might be completely finished styling or adding etc to the nav bar. Hope that makes sense and thanks in advance for your help.

New link:

I understand the frustration, but both html & css and Webflow have you covered, you just need to learn more things.

First, look here:

CleanShot 2022-08-24 at 22.10.48

The dashed outline means there is no dimensionning styling on your element: no content nor dimensions. The bg image doesn’t count as a dimensionning element. So your element shows up, but it’s 0 × 0px. It’s not a good practice to put a bg image here because it doesn’t count as an element and it’s invisible in your dom. people that read your site on a screen reader, skipping the CSS, don’t see your logo. And you can’t have an alt description for it. To fix this you could simply give dimensions to the link block, but I think you really have to put the image as an image and not as a bg. An image as an image appears in the dom (html), but a bg image is only defined in the css (styling).

So here, you need to start learning about html and css, at your pace.

Now, I have re set the link to homepage on your link element, so it shows the combo class “current”

CleanShot 2022-08-24 at 22.13.44

Here is how to style for the Link block 4 class without the Current combo: click on the selector dropdown (1) then on the single class (2)

CleanShot 2022-08-24 at 22.14.55