Centred sticky menu with icon in middle

Hi, am trying to create a sticky menu with (SVG) icon in the centre - similar to the menu on the Rapidweaver central site (link below) . I’m using foundation + have Big White Ducks stacks - does anyone know a simple way to do this. . please.
https://rapidweavercentral.info/modules/

I think you can position the logo centre using the regular Foundation navbar called Topbar and Topbar Surgeon from Big White Duck: https://www.bigwhiteduck.com/stacks/tbsmenu/ but, I’m pretty sure Topbar doesn’t support SVG’s for the logo.

1 Like

You are able to use a svg -> font conversion web service (like https://glyphter.com/ or others) and generate a font. This you are able to use instead of the svg then everywhere.

See the custom header in my website for example, font icon in the middle: https://instacks.com/

3 Likes

Unfortunately not I’m afraid. Centre logos are not supported in TopBar with or without augmentation.

Topbar logos can be warehouse images and so directly support SVG’s, just link to them - it is just RW that does not support SVG drag and drop.

There was a time when a centre logo was possible by using 2 TopBar’s and a logo in between, you may have seen or be referring to this one that I made some time ago:
https://demo.bigwhiteduck.com/SlideUp/Settings/
This has not been possible for a few years though since changes to TopBar rendered it impossible to use two or more on a page.

1 Like

Hi Jamie, and welcome to the forum.

All of the above is true… nevertheless it’s still possible to replicate the menu — for sites with simpler navigational needs — using Big White Duck stacks, namely Button Plus2, Sections Box, Chroma and BluePrint SVG.

I’ve put together a project file to show you how, which you can download here. I’ve included dropdowns — 1,2 and 3 columns — so you can see what’s possible… but obviously they create their own set of problems on mobile devices.

Edited: Now made Sticky with Chroma.

Marten

7 Likes

I hesitate to use the word boom on the grounds of British decorum but, BOOM.

1 Like

Thanks Jannis, this is a really neat tool. I didn’t know it was possible to do this.

Hi Marten, thank you so much . This is brilliant and above and beyond anything i’d expected. Really helpful and shows me exactly how to do what i wanted.
I’ve one question :at the moment, when i preview the project file on mobile , the menu defaults as open - is there an option to adjust the chroma stack so that it shows a button to open the menu accordian style - or would i need to create a different menu for mobile devices?
Thanks again and best wishes, James

Hi Jamie,

I’ve updated the project file so that it now has a very basic menu for mobile devices.

I’ve achieved this by using the Big White Duck visibility child stack to hide the ButtonPlus2 menu on mobile devices and show Foundations Topbar instead, which in turn is set to hidden on desktops.

You can download this new version here.

Marten

4 Likes

Amazing! Works like a charm. Thank you so much Marten. This is really generous of you. You’ve saved me hours to time scratching my head trying to work out how to do this. I really appreciate your help. Thanks again and best wishes, James

1 Like