Foundry | Logo larger

This I think is doable, as it makes more sense to have a smaller footprint, over a very large footprint.

I agree that a navy bar which contains only text looks strange in those sizes. The need (or actual the wish) to have more flexibility is tied to the question how exactly the given logo is designed. And how you want to align it vertically to the text.
Just as a (over exaggerated) example - Imagine this: The VW Logo/Signet. Below that: the logotype (“Volkswagen”) followed by a horizontal divider. Below that a Slogan/claim.
That would make up a very tall logo which needs a lot of space if you e.g. Want to align the divider with the navigation text.
I am aware that I totally ignore the workload that comes with modifying stacks settings - just because I have not the slightest clue :wink:
A taller nav bar with transparent background placed on top of a huge background image would not appear that bulky as it appears in the screenshots…

If I understand what you’re saying, then you don’t need to make the Navigation Bar that tall. You only need it as tall as your text. The below example uses the 55px height for the Navigation Bar:

Edit – Forgot the Volkswagen title:

Your response may generate quite a lot of feedback. I was content to just read everyone else’s comments and learn what I could from them. However, your latest response prompted me to chime in.

Never underestimate the creativity of those who use Rapidweaver or the Foundry suite. There may be many reasons for someone wanting a high navigation bar. From what I’m reading, it appears that many people are after something which doesn’t seem to be possible using their current tools, and are seeking a workaround to make it work. Hence a large nav bar to begin with.

If I may summarize: People are looking for a way to initially display a large logo so that their branding is memorable. Who wouldn’t want this? Once the browser begins to scroll downward, they want the branding to be visible, but less prominent. This would require an initially high nav bar to shrink to a minimum height, using a fancy animation which is literally all over the web on site after site, with many developers providing code which would allow this to happen (http://callmenick.com/post/animated-resizing-header-on-scroll). The logo would shrink at the same time and place itself in a muted way off in the top corner, proportionate in size to the new nav bar height.

Do I have it right, people?

2 Likes

You should check out BWD’s amazing Chroma and ChromaPro stack. See Chroma stacks

Works great with Foundry.

2 Likes

If this is what was being looked for in the above posts then I did not get that sense. That being said this sort of setup would likely be its own separate stack – a specialized navigation bar for that unique purpose.

1 Like

I looked back over the previous posts and realized that I was reading into their questions more than they said. The reason for that is because I was searching this question (Logo Larger) for a workaround for a variable size nav bar which would in turn shrink the logo down. Judging by the “likes” to my post, others are searching for a similar solution.

The reason I was doing that, is because another post which was addressed/answered seemed to not fully grasp what the asker was asking, and it had to do with a shrinking logo while scrolling. That post was here: Complicated Menu- Can this be done?

I think that I combined these two questions into one issue and that’s why I read more than was stated and thought I was addressing the other question.

All of that said, I cannot conceive of a way to implement your idea to use a separate stack to accomplish a shrinking logo when scrolling. Is there an example of someone doing this? Could you enlighten us, please? Thanks very much.

I’m guessing you didn’t have a look at Chroma.

Here is a a Foundry Nav bar doing what I believe you want to do - Chroma usage examples and click on the Foundry Example and Logo Size Change

2 Likes

Thanks @webdeersign - I initially looked at the first link but couldn’t find what I was looking for. Your detailed breadcrumbs the second time did it. VERY NICE! This looks promising. I’ll follow up later if we are able to implement this and send a link so that you can see how it looks. Thanks for persevering.

ok, obviously I failed to explain what I mean with the VW example.
I was aiming at aligning a logo to the navigation text SIDE BY SIDE (like in the nav bar stack) – not logo + navigation BELOW (like in your screenshots)

my screenshot shows a logo of 200px height.


I would love to see the nav bar stack getting modified so that it would allow me to:

  1. use logos that are much taller than 80px
  2. fine-tune the alignment of logo and navigation text. differently than “vertically centered”

in this example, the word „volkswagen“ needs to be aligned to the navigation text (home, something, everything etc.)
currently I am forced to build a more or less complex layout to achieve a well-balanced look on all devices.
It would be great if I could use an enhanced version of the build in nav bar stack! :smiley:

1 Like

@papart – Yeah, I did not get that from your original description. Sorry.

What you’re doing there in your example is a much better solution than cramming those features into the navigation stack, believe it or not. You’re using the modular stacks in Foundry to create a complex layout, which is something I love!

Here’s an example of this modular system – there is a Margins stack in Foundry. This stack serves a very specific purpose – provide responsive margins and padding that can be set at each of the three breakpoints. With this stack in Foundry it means that you can use those features with all of the other Foundry stacks. Each stack does not need to have those margins and paddings settings built-in to them. This helps to keep down bloat of the software, as well as allows you more flexibility over how your pages, and project as a whole, are designed. This modular experience is something I strive for in Foundry.

Using this modular setup you’ve built a more complex navigation that you can tweak for each breakpoint and then reuse throughout your project with Partials.

1 Like

my english isn´t good enough to nail down in written words what I actually want to express. Therefore “sorry” belongs to my side, I guess :innocent:

anyway - just in case you are bored one day and you don´t know how to spend your time - please increase the max height of the nav bar stack a little bit…

as an absolute outsider to the work of a stack developer I imagine that you just have to paste “150px for god´s sake” into some kind of cryptic code document and hit “command+s” to make us happy … :kissing_closed_eyes:
I am sure it´s exactly like this, isn´t it? :stuck_out_tongue:

@webdeersign - Well I tried to see how it might work with our logo, but I can’t seem to get beyond an 80 px high logo and while the animation is awesome, I haven’t figured a way to get the logo to appear larger. It’s practically unreadable. This little tiny logo moves up into the corner, but no size differential. Am I missing something?

Any suggestions?

See my reply in your other post. PS if your logo is almost unreadable at 80px high then doesn’t sound like a suitable logo for a nav bar to me. Maybe it’s time to create a new version of the logo that does work when it is 80px high.

That is exactly what can scare off (new/potential) clients when the first thing the designer comes up with, is suggesting to tweak or even redesign their logo.
from my experience, a lot of clients are keen on the original logo they have (maybe for ages), no matter how bad it is actually. :wink:
to clients it might sound like the designer is trying to generate some extra money with additional logo-work.

From my experience, every single client is proud of their logo and initially unwilling to adapt the logo to fit the requirement. This isn’t a Foundry or RapidWeaver thing, it is a fundamental of good web design thing.

Mobiles have a very limited area to use and if a client wants to fill that space with a huge logo within a navigation bar then someone has made big mistake.

If the client wants to see a big logo then IMHO show them one but don’t put that huge logo in the navigation area. Makes no sense.

1 Like

I never desired to have a 200px logo in the nav bar on mobile!

@papart – I don’t think anyone was insinuating that you wanted a 200 px logo at the mobile breakpoint. I believe @webdeersign was saying that he doesn’t think a large logo belongs in a navigation area, but instead it would be better suited to you, your client and the site visitors if it were placed somewhere besides in the actual navigation bar stack itself.

I think we’ve probably come to a good jumping off point for this thread, so I’m going to go ahead and close it. I will look at the Navigation Bar’s height min and max values for a future update though.

4 Likes