Using a background image in the Nav Bar

[jgarriz]

Greetings, folks,

I’m in the process of updating an older site (built with YourHead’s old “Blocks” plugin back in 2009!) to a new one using Foundry (thanks, Adam, for this great product, by the way!).

Some background info: I’m using RapidWeaver Version 7.0.4 with Stacks V3.2.3 and Foundry V1.0.1.2.

The issue I’m encountering: I want to use a tiled image as the background of a “sticky” Nav Bar. I’ve found that any setting made in the “Background” and “Border” sections of the “Nav Bar” stack inspector will indeed show up in the Nav Bar (e.g., one can select a background color or image for the nav bar using the controls in this section of the Nav Bar stack inspector, and you will indeed see the site’s pages listed on it), but the bar will not be sticky–instead, the image or color selected as the background of the bar scrolls away as one scrolls lower on the page, while the Nav Bar items exhibit the desired sticky behavior sans the selected background.

In the above image, I’ve set the background of the Nav Bar to an image.

It appears that, at present, the only way to have a sticky nav bar with any kind of background is to select a background color or border in the “bar” section of the Nav Bar stack inspector (which means that at the present time, you cannot have an image as the background of a nav bar, if you want the bar to be sticky).

Is this correct, or am I missing something? If this is indeed a (minor) limitation, please know that I’m actually fine with using a solid-color for the nav bar at the moment, but would like to suggest it for a future revision.

If you want to see the site (work in progress), here’s the URL for the staging area for the updated version:

http://bobscustomremodel.com/V2/

It’s easiest to see the behavior I’m referring to if you resize your browser to a mobile size, then scroll down–you’ll see that the Nav Bar items do indeed exhibit the “sticky” behavior, but that the image selected as the background of the Nav Bar does not.

Big thanks, everyone, for any insights that you can provide.

Javier Garriz
javier@rightbraincomm.com

[dropgates]

Great opening to the website Javier; beautiful work.

[elixirgraphics]

Using a background image in this way isn’t a possibility with the Navigation Bar. This is due to the fact that the part of the Navigation Bar that gets ‘stuck’ to the top of the browsers window is not the same area that is getting styled by Stacks’ default background style settings. The ‘stuck’ portion is a <div> within that area, so it gets stuck and your styled portion scroll away out of sight.

[jgarriz]

Thank you for the very kind words!

[jgarriz]

Thank you for the prompt response, Adam.

As mentioned in my message, I’d like to respectfully submit this behavior (i.e., being able to specify a tiled image as a background for a sticky Nav Bar) to be considered for inclusion as a feature in a future release/revision.

In the meantime, one of the fine users on the Elixir Foundry forum (Stuart/Kryten) suggested a workaround that provides the desired functionality–adding the following CSS to the page:

.navigation_container {
	background-image: url(../files/backgroundImage_54.jpg);
}

(I’ll be updating the staging area URL to reflect this)

Again, THANKS for the great work on Foundry. It’s well worth the price and the (relatively small) learning curve. I’m looking forward to seeing it get even better!

Javier Garriz
javier@rightbraincomm.com

[jgarriz]

Hi again, Adam.

It seems I may have spoken too soon–I updated my prototype site to reflect the added CSS that Stuart suggested yesterday. As mentioned, it seemed to work when I added the CSS within RapidWeaver (and then previewed the site within RapidWeaver); however, when I exported the site and previewed it with browsers (Safari, Chrome, Firefox), the sticky Nav Bar with the tiled background doesn’t stick! I’ve uploaded the site to the staging area:

http://www.bobscustomremodel.com/V2/

As mentioned, I’m fine with using a solid color for the sticky Nav Bar for now. Again, thanks!

Javier Garriz
javier@rightbraincomm.com

[elixirgraphics]

When I visit the URL you’ve pasted in above, the Navigation Bar is sticking, but its background is completely transparent.

If you remove any custom code you’ve added and set the background color of the stack, via its built-in controls, back to a non-transparent color do things then function properly?

[kryten]

Setting a background image to the Navbar with custom CSS is definitely do-able. See here:-

http://technodope.co.uk/

Noticed that referencing the image to be used with the resources macro seems to be hit and miss. In the example URL above I’m passing in an absolute path. That method seems to be rock solid…

[jgarriz]

Thanks again, Stuart.

I switched to the absolute path option for the custom CSS that you provided, and re-posted the site–this time, as in the example you posted (thanks for doing that–especially as the domain seems an appropriate description for my skill level!), the Nav Bar with tiled image as a background sticks as desired!

In response to Adam’s question, I’ve also posted two other versions of the site without any of the custom CSS that you provided, showing the Nav Bar behaves when the background color selected in each of two ways:

Result when the background color of the Nav Bar is selected via the default stack background color controls for the Nav Bar stack (nav bar is sticky, but the color does not stick with it):
http://bobscustomremodel.com/NavBarTestingDefaultStackColorControls/

Result when the background color of the Nav Bar is selected via the “Bar” section of the stack background color controls for the Nav Bar stack (nav bar is sticky, and the background color does stick with it, as desired):
http://bobscustomremodel.com/NavBarTestingFoundryNavBarStackColorControls/

Again, THANKS so much, Stuart.

Javier Garriz
javier@rightbraincomm.com

[jgarriz]

Adam,

In response to your question, I’ve also posted two other versions of the site without any of the custom CSS that Stuart provided, showing how the Nav Bar behaves when the background color selected in each of two ways:

Result when the background color of the Nav Bar is selected via the default stack background color controls for the Nav Bar stack (nav bar is sticky, but the color does not stick with it):
http://bobscustomremodel.com/NavBarTestingDefaultStackColorControls/

Result when the background color of the Nav Bar is selected via the “Bar” section of the stack background color controls for the Nav Bar stack (nav bar is sticky, and the background color does stick with it, as desired):
http://bobscustomremodel.com/NavBarTestingFoundryNavBarStackColorControls/

Let me know if this is what you were asking about.

As you may have read in my reply to Stuart, I tried another one of his suggested custom CSS (using the absolute path instead of referencing the background image via the resources), and it seems to work, as seen in
http://www.bobscustomremodel.com/V2/

Thank you, Adam.

Javier Garriz
javier@rightbraincomm.com

[kryten]

My pleasure.

Adam is not crazy about too much custom CSS ‘hacking’ of Foundry. I think he prefers users, at this stage, to try to stick to the UI settings he is exposing. I can understand that to a large degree - but sometimes it is the right thing to do to get the best aesthetic, in my personal opinion.

I am also finding, as I get more and more used to Foundry, that I’m using a lot less custom CSS. What is provided is just SO GOOD that the vast majority of the time you just don’t need it to get a professional result. This is the first framework I have been able to say that about.

I’m just pleased you got it working

If you wanted to give your banner header text a little life you could add:-

.page-header.text-xs-center {
    text-shadow: 4px 4px 8px #000;
} 

Best wishes!
Stuart

[jgarriz]

Thanks for yet another “enhancer”; the added shadow sets the site title off very nicely, consistent with the logo that appears right above it.

I also appreciate your feedback regarding how Foundry stacks up (no pun intended) to other “free form” stack-based site builders (Foundation, Blueball FreeStacks, etc.). Given the personal implementation preferences and approaches that each developer has (and the framework around which they’ve built their product), it naturally takes some time (as an end user) to get into the flow of how to use each of them efficiently. The fact that you’re noticing a decreased need for custom CSS in this particular framework is a significant figure of merit.

I completely understand the reluctance on any developer’s part against the use of “hacks” (however elegant and effective), given the wide range of technical understanding in the user base (for instance, a “technodope” like me!) and instead have users stick to the published UI settings. Super-helpful workarounds from generous folks like you really help, though, to tide us over until such a time that the requests become features in a future release!

Again, THANKS!

-Javier
javier@rightbraincomm.com

[elixirgraphics]

Result when the background color of the Nav Bar is selected via the default stack background color controls for the Nav Bar stack (nav bar is sticky, but the color does not stick with it):
http://bobscustomremodel.com/NavBarTestingDefaultStackColorControls/

This method will never work, and is the same reason your image doesn’t work from your original inquiry. The reason being is that which I described earlier in the thread, here: Using a background image in the Nav Bar - #3 by elixirgraphics

Result when the background color of the Nav Bar is selected via the “Bar” section of the stack background color controls for the Nav Bar stack (nav bar is sticky, and the background color does stick with it, as desired):
http://bobscustomremodel.com/NavBarTestingFoundryNavBarStackColorControls/

This is the proper way to style the Navigation Bar background.

The background has to be applied to the inner <div></div> and not the outer one. This is the reason for this being a separate color picker from the one built-in to Stacks.

[elixirgraphics]

If you wanted to give your banner header text a little life you could add:-

Or just use the Drop Shadow option built in to the Navigation Bar stack.

[kryten]

Help me out and apologies if I’m being even dumber than usual! How does that setting style a header text in the banner? Isn’t that just for the Navbar?

[elixirgraphics]

Must have misunderstood. Thought we were talking Navigation Bars here. My bad.

[elixirgraphics]

@kryten

Adam is not crazy about too much custom CSS ‘hacking’ of Foundry. I think he prefers users, at this stage, to try to stick to the UI settings he is exposing.

This is definitely true.

[kryten]

Phew! No… my fault… it wasn’t very clear what element we were talking about… but while you are pointing out drop shadow effects… are you ah… tempted to drop one into the headers stack just for, you know, moments like this?

[kryten]

ying, meet yang
</filler_for_20_chars>

[jgarriz]

Adam and Stuart,

Thanks for all the feedback and assistance–first-class support indeed!

Adam–I understood the reason for the background needing to be applied using the separate color picker (as opposed to the default stack color picker). As mentioned in my earlier message, I’d like to respectfully submit this behavior (i.e., being able to specify a tiled image as a background for a sticky Nav Bar) to be considered for inclusion as a feature in a future release/revision of the stack.

THANKS for your continuing great work on this!

-Javier
javier@rightbraincomm.com