Custom HTML menu for Foundation top bar

Anyone know of a tutorial for how to code a custom Top Bar in Foundation?

Would like two menus with a logo in-between so need to manually decide which pages each Top Bar menu picks up. I can see how to select the option in Top Bar but my coding isn’t very good and attempts so far are not working.

Have you looked at the demo project file Joe has? There are good examples in that.

when you select the html option it actually gives you example code in the box
do you have a more specific question/need?

Thanks Scott - I played with this earlier but made elementary errors (I really must spend some time learning a little code!) so it didn’t work. Have now seen the error of my ways and all is well.

Looking ahead however, it’s occurring to me that, if I use 2 top bar menus (with a logo in centre), when we get down to mobile size there will be 2 hamburger menus. If I’m correct, would the workaround be to create a 3rd Top Bar which is the entire menu and only show it on mobile devices - whilst disabling the two previous top bars on mobile?

I don’t think it’s a good idea to use two TopBar menus I seem to remember reading that it causes issues.
but, if you want to give it a go then yes, create one specifically for mobile.

What is the purpose for wanting a different Top Bar on Mobile?

My aim is to try and have a top bar menu on the left and on the right with a large logo in the middle. I figured the best way is to have 2 top bar menus, manually coded to achieve this. My concern is that, on mobiles, I will then have 2 hamburger buttons.

Off Canvas supports 2 hamburger menus…

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.