With Foundations, how can I add a Split Button to a Header bar?


(Milton Baar) #1

Using Foundations and want to add a split button to the header bar, can someone help with this please?


(Matthias Ficht) #2

You could try placing a Button Plus button ( https://www.bigwhiteduck.com/stacks/buttonplus/ ) inside the TopBar Dropzone (at the bottom of the TopBar settings)…


(Milton Baar) #3

I guess…but what I want is exactly like https://docs.joeworkman.net/rapidweaver/stacks/foundation/button-nav/topbar-extra-zone and I have followed exactly the process in https://docs.joeworkman.net/rapidweaver/stacks/foundation/button-nav/tb-dpz but I still get the button below the top bar and not “in” the top bar…so there must be a way to do it…?


(scott williams) #4

Hard to tell without seeing your site, but my guess is you don’t have enough space to fit what you are putting in there and it is drving it outside the TB.


(Milton Baar) #5

Could be right, trying to add a split button but there doesn’t seem to be a control for the size of the button…


(Milton Baar) #6

No good…removed everything and started from scratch…

Tried adding an image stack with a 25pix image, still showed underneath.
Tried adding a paragraph stack with the word “test”, it showed in the correct place; tried adding three html list entries in the paragraph stack, only the first line showed.
Added a dropdown stack with a paragraph entry, nothing showed; tried adding multiple paragraph stacks within the dropdown…nothing showed.

I can have a single text item show, but anything else…no go :frowning:


(Jason Bostick) #7

Is this what you’re trying to do? https://www.jbostick.ca/test/gremlin One page has a button plus. One has a PopDrop stack


(Milton Baar) #8

The [EDIT] ButtonPlus is what I am trying to do…although I would like it to be the same colour as the header…

But using the Foundation stacks…can’t do it…would love to know how you did it?


(Jason Bostick) #9

Try the Button Plus one again - I redid the colour, and removed the title, kept the icon. The Foundation button doesn’t allow font awesome icons to be added, which is why I’m using button plus - it’s free from Big White Duck (donations are welcome though).

All the setup is:

  • top bar menu aligned left
  • dropzone aligned right
  • button plus set to be a dropdown
  • add a Foundation dropdown stack and set content to be a link list.

Here’s a couple of screenshots:


(Jason Bostick) #10

Whoops, just read your edit. Still, the styling is easily done


(Milton Baar) #11

It works…and I also have an idea why it didn’t before…user error, of course!

I had, on another page, another dropdown with the same name/ID as the one I was testing. Once the button was in the correct place, it was then obvious that this was causing a problem as the header is in a partials…removed the paged-base dropdown and - bingo!

Thanks for the fantastic help, now I am off to convert the top bar to a floating bar…or something like that, so it doesn’t disappear from the top of the page :slight_smile:


(Milton Baar) #12

Getting the hang of this at last, always fun using new tools and discovering things…and the more ambitious I get, the more I break.

Have you successfully added two buttons by any change? When I try, the second button is directly under the first, no matter whether I select left, centre or right alignment for the second one…


(Jason Bostick) #13

Hmm, haven’t tried (and I’m off to work now for the day). Did you try putting the buttons in a 2-column stack?

I know big white Duck will be out with a new stack shortly that will help with building menus like this, though that doesn’t help you right now


(Milton Baar) #14

Brilliant thought - two column stack with the buttons, make the two columns right aligned and a max width of 200px so it fits in the area!

Once again, thanks :slight_smile:


(Andrew Tavernor) #15

Just for future reference, ButtonPlus2 will have an inline setting that will mean you won’t need to use the columns to do this.

Hopefully coming next week.