Button integrated into nav bar?


#1

Is it possible to achieve this effect using foundry? (see screenshot)

I want the “Contribute” button to link to an offsite page and to be styled differently than the other options. I have the nav bar currently paired with the banner and located under the banner but I could have it at the top. I have it set to sticky now but that isn’t a deal breaker if I can get this to work some other way.

Should I use a button or somehow overrule the stying of the Contribute menu option and if so, how to do it?
Thanks for any help


#2

Just use a 2 column for the navbar and place the regular navbar inside one and the button into the other one.


#3

Brilliant! Boy do I feel stupid :slight_smile: Thanks!


#4

Actually, while your suggestion is do-able, it does mean that I lose the functionality of the navbar pairing with the banner image. Are there any alternative suggestions so that I can enjoy the benefits of the navbar but still have the final menu option styled like a button?


#5

Hey there @apgroner!

Adding a button within the Navigation Bar is not an option of the stack. The specific thing you’re looking to do in this case isn’t possible with the way the stack is designed.


#6

You might want to: add a margins stack in the banner stack. Then place the columns inside and set the margins so that the column stack is at the bottom of the banner. Change the banner contents in a way that the navbar looks like it is paired. Use the sticky stack to have it sticked to the site when you scroll up…


#7

Thanks for your answer. It’s a bummer because that seems to be quite a de facto standard for political campaign websites of which I do many. They all want their menu bar to look like that. Perhaps you will throw it on your backlog to style the menu options individually or add other items into the nav bar container.

Thanks for responding so quickly, even with bad news :slight_smile:


#8

I would really like to see this added to the wish list. Adding a button and aligning it on the right, is a common thing to see these days on Bootstrap sites and clients often want it. It’s also a great way to draw attention to a function that is not part of the navigation such as BUY or SIGN UP.

It could also be implemented in a custom zone way to add whatever you want in a zone.


#9

Yes - please add this to the to-do list!


#10

Ditto. It would definitely help.


#11

This feature has been requested and discussed in the beta group. Adam will be able to explain the issues better than me. But he is aware of this request and some thought has been put into it.


#12

There’s some challenges to having this feature in the Navigation Bar. Mainly dealing with space limitations in a horizontal bar. The space limitations are not a problem on the desktop, nor the tablet (in landscape orientation).

You get into strange territory though at the mobile breakpoint. What happens to this button that is in the navigation bar at this breakpoint? What takes precedence, the site title? Logo? Button? Navigation Toggle? Does something get bumped? If you treat the button as a regular navigation item and drop it into the hidden drop down navigation at the mobile breakpoint it loses its usefulness. So most likely it needs to stay in the navigation bar itself. That’s makes for a lot of stuff to cram into a very small space. This is just the surface-level issue.

It isn’t that it is not doable, it is, but there’s not an elegant easy solution that I like. That’s not to say something like this won’t come to Foundry, but I want to make sure it is done right. For now though it is on the todo list, and I have vague ideas of how to pull it off, but it is not a feature that will be showing up right away.


#13

Makes sense. For inspiration, here are the two ways that one developer did it. One was to radically change the mobile menu bar, styling the “button” option differently, much the way you would the Active option. The other was just to shrink the menu text.

Ideally, if sacrifices are needed, it could be handled by options. Most times, I would probably be happy to lose the logo. It would be ok for there to be constraints on numbers of items in the nav bar for the feature to work. Look forward to your ultimate solution :slight_smile:



#14

Or could another option be that the “button” is simply part of the regular navigation (and treated as such via various adjustments for devices). Instead would it be possible to have a custom look for 1-2 navigation items so they stand out from the others? After all a menu nav item is a button of sorts.

I’m not sure this is possible or practical, just throwing out ideas.


#15

That is by far the most elegant solution. For me, my “Donate” button is simply a link to an off-site page. I have it disabled from the navigation but would prefer to turn it on and just have settings to style this one option independently of all the others, must like we do for the Active button.


#16

I think there is an easy solution which is to provide hide/show buttons for logo and also title and provide a user configurable breakpoint for each. This gives total control to the designer and is exactly what is provided in other systems.

What very rarely works is a fixed breakpoint and expecting everything to fit. Some navigations need to go to “mobile” at a high screen width and some can remain until a small “mobile” width.

I know that navigations systems always start off simple and then quickly develop into a complex thing but hiding logo and hiding title at user BPs is very powerful.

One other thing while talking about navigation, is that I would love to be able to switch to the Nav Overlay instead of the normal NavBar mobile menu. A button would fit very nicely into a Nav Overlay.


#17

This would not allow for the floated right button style that I think some people want. I suspect that if I were to do it this way the first question would be: How can I align my navigation to the left and the button to the right. In the above scenario that would not be possible.

The second option shown is not responsive. Foundry is built around being responsive, so that is not an option.

Most times, I would probably be happy to lose the logo.

While you would be ok with that, someone else might not. So what happens when they want the logo, site title and button, along with the navigation toggle that is always displayed?

This is just a glimpse at what has to go into thinking through adding a feature to a stack when it affects a huge swath of users.

Like I mentioned before, this is not something that will be coming any time soon as it needs to be well thought out and implemented in an elegant and easy-to-use way.


#18

Adam: Got it. Hadn’t thought about the left/right float issues.


#19

Compiling all these responses, it seems like the thing I (we?) most want is simply to be able to style the last menu option differently from the others, independent of whether it is the Active button or not. Hopefully that is also the simplest request to handle, when and if you can. Thanks :slight_smile:


#20

The first demo on the B4 documentation for NavBar shows a typical NavBar with branding, page links left justified and then buttons right justified and it works perfectly on mobile. This is one of the standout features of Bootstrap IMHO. This implemented in Foundry would be killer.

see https://v4-alpha.getbootstrap.com/components/navbar/#supported-content