Learning to build with Foundation, help with the topbar please

Classic
1

I am working through the Foundation videos and making my first site.
To be honest I’m finding it really hard work at the moment and particularly frustrating working with mobile first, despite acknowledging its importance.

My main issue at the moment is that I still don’t understand topbar despite going through the help page several times.

Is it possible to have the topbar showing coloured text on a white background on a desktop, but showing white text on a coloured background when it hits the break? Or would I need to use 2 topbars with a hide/show option for the relevant break points?

2

That’s exactly what I ended up doing here.

Two Topbars, controlled inside the Visibility stack, which allowed me to set them up as I wished in terms of colours for desktop and mobile.

Rob

2 Likes
3

This would probably be a good option. Just hide one on mobile and tablet in the default stack settings. But usually the topbar can be set to appear as a small box icon on the right or left and defaults to standard mobile navigation.

1 Like
4

Hi Rob, that looks really good. I keep going back to learning Topbar and then getting stumped. I sort of thought it might be bad practice to have two topbars on one page for some reason, even with a visibility stack, but I’ll certainly give that a go thank you.

5

There is nothing wrong with having two topbars, in fact, with the ability to hand code the links in a topbar, you could have as many as you want, linking to whatever you want to link to. Of course, too many would be ugly on one site.

1 Like
6

Try the TBS Menu stack - it is a much simpler way and just uses a little CSS rather than lumbering your page with duplicate TopBars. What is more its free :slight_smile:

You only need to set it to apply to : below-breakpoint (640px is the default in Foundation)
and then set the colours that you want to override → the bar background and the various text colours.

the yellow boxed settings are all you need to change - you will need to click the image below to see it all as it is quite tall.
(The stack will do a lot more but you can just leave everything else at its default values if all you want to do is to change the text and background colours)

tbs-settings.jpeg328×856 52.3 KB

4 Likes
7

I think Andrew’s solution is elegant and sophisticated. Did TBS work for you @Gabrielle?

8

Thanks everyone. @zeebe it’s handy to know that multiple topbar stacks aren’t an issue. @tav thanks for the link to TBS Menu stack and @devananda I haven’t tried it yet, I’m struggling to get to grips with Foundation and Waterfall and other new stacks at the moment, will take it slow :-).