Hi I’m creating a website banner which consists of a photo with background filter and overlaid is the navigation (on top of the photo) and some banner content (also on top of the photo). I will need this exact banner to appear on numerous web pages so am trying to create a symbol to re-use on other pages. It is not working for me and an error comes up saying it won’t allow nested symbols. I’ve tried saving each element as a symbol eg: banner, nav, logo etc but when I try and construct it on a new page, they just display underneath eachother instead of overlay on top of the photo.
This is what it looks like, it is on page called “Test”, there is another banner on the home page but that is the old one I don’t want to use.
Any help appreciated as to how I could set this up so I can re-use elements whether as one symbol or multiple symbols. Thanks.
Thanks Stu, problem is that I cannot apply the blur to the whole banner otherwise the logo, nav and search box will all be blurry. I was following a tutorial on the Webflow site on how to use the background filters so it does not affect the overlaid components. The tutorial I followed was here: - YouTube
Trouble is then I cannot turn this section into a reusable block (or symbol as Webflow calls them) as it can’t nest the elements… would you have any other idea how I can achieve this without breaking the design? Thanks for your input.
A nice way to achieve what you’re trying to do would be to unlink the symbols like @StuM mentioned. Then nesting the header and the container inside another div. You then should be able to create a symbol from the parent div.
