In another thread here I’ve made a post on how layouts and other stuff changes all by it self, and now it happened again, so I hope you will take a look at this @Brando.
I made share buttons. They looked good, so I published it, and they also worked perfectly. So I went on to work on other pages, inserting Nav bar on empty pages using symbols. I first noticed a slight difference on the Navbar from page to page (the content was a a few px higher on some pages than on the landing page), so I started to click from page to page in the designer, just to figure out if this was the case for all the pages. That’s when I noticed that the share buttons suddenly had changed, and not looking the way I made the.
On the imgaes below you can see how it looks in Designer and on the published page. Can you please try to help me figure out this?
I found the issue with your navbar! Basically on the current class you have some 15 padding for ‘Navlink Logo’ but on the non-current class you don’t. So just add the 15 padding to the other ‘Navlink Logo’ and that should fix your navbar
Share button - is it just the one instance in ‘Product Template’ ? I can’t see other instances…
Hi @StuM , and thank you so much for helping me out!
Navbar: Yes, you are right… I see it now… but the strange thing is… as long as the Navbar is a Symbol, shouldn’t it look the same on every page? Isn’t it strange that Navlink logo has different padding then?
Yes… Share button are only to be found on Product Templates … at least for now.
Can I make a Symbol of the Share container section and use the same buttons on other pages, or do I have to recreate them on other pages?.
I just saw something else too… I did make interaction on all navbar buttons, but now there where interaction only on two of them. I’ve fixed it, but wanted to mention it, cause it strange that it just stop working.
I think I just figured out what happened to the share button @StuM . I remember now that I had a lot of unused class names, so I cleaned it up in the style manager… That means that the class names I used for the share buttons also got deleted… I’m hoping that if I recreate the link blocks with the right class names, the embeds will start working again (or I just have to make everything from scratch… but I think this is what causes the problem).
But I still havent figured out why the styling is different in the Nav links as long as I have used the same Symbol on each page.
Anyway… that’s my update on the issue Thanks again for all your help and patients with me!
No problem, and yes the navbar will look the same, but the difference with links is because one link within it contains a ‘current’ class as well as a ‘normal’ class, it is really easy to think you are styling all the nav links but not realise you were only applying the style to that ‘normal+current’ one. (i’ve done it before and many others too - golden rule is check for ‘current’ class when styling navs)
When you are on the home page in the designer, both the ‘home’ nav link, and ‘navbar logo’ will have a current class (green) next to the the normal class, as they both point to the page you are ‘currently’ on.
I’m glad you figured out the share buttons losing their styling. Yes, once you are happy with the styles again, turn it into a symbol to re-use on other pages - saves you lots of time and helps with consistency!
It’s true that when elements are in a symbol they have the same styling on all pages. However, the issue with the navbar is that each navlink is linked to a different page and since you have custom styling on the current link, that styling will affect different navlinks on different pages. And since this styling adds margins and uses a percentage value for the width of the navlink, that will surely result in that slight difference on different pages.
Also, since you’ve added the logo within a navlink and connected the link to the homepage, the navlink logo will be different on the homepage compared to the other pages.
To make sure the look is consistent on all pages, make sure that you style the current state in a way that doesn’t affect the size and shape of the navlink. Or use the same values for width, padding, margin, etc… for the non-current state as well.
Looks like you’ve used html embeds for the share buttons and added the class within the code. I want to note that clearing unused classes doesn’t delete any class that is currently applied to an element. However, since your class is used in an embed, clearing the class will definitely clear the unused social button class.
It’s best if you add the class to the div or the html embed element and style it instead of using it as part of the code. However, note that since you’re embeding a link tag, it will be harder to style the link typography properties. Another workaround would be the way you did it first but to make sure not to clear the styles, or ,for example, to use the same class for other buttons in your project.
Thanks again for all your help and patients with me!