Vertical lines in navigation bar


#1

Is it possible to include vertical lines in a navigation bar as seen here - http://www.montpelierdentalcare.co.uk/

I can’t seem to find an option to achieve this.

In addition, if I wanted to mimic the semi-transparent panel on top of the slider, which slider tool in Foundry would I use to achieve this effect? Not asking for instructions, just a steer towards which component to use - happy to experiment.

Thanks!

Rob


#2

That isn’t a feature of any of the Foundry navigation stacks. It is has some downsides when it comes to how it displays in a responsive environment, even when implemented well, IMHO.

It is also a little bit of an older looking way of displaying a navigation bar, also IMHO.

You might look at using the Motion stack for your “slider” and the Backdrop stack for the translucent overlaid box, which you can place in a columns stack.


#3

Shame about the bars. I rather like them.

I’ll take a look at the combo you suggest, thanks!

Rob


#4

That combination works really well Adam, thanks. Unfortunately, on the original site, the text in the transparent overlay changes with each slide and I don’t think there’s a way to achieve this with Motion and Backdrop - unless I’m missing something.

Rob


#5

Well, you could get fancy and combine things… How about something like this, where I’ve combined the Motion, Backdrop and Slider stacks. Setting the Slider’s slides to be Content Slides and getting them close to in sync with close pause durations. Kind of provides a cool effect, too.

Download Project: https://d.pr/f/kUJ14W

You could even do it a little different to have different Backdrops too, like this…

Download Project (2): https://d.pr/f/q1bCja

You have to make sure the Motion and Slider stacks have the same pause and transition times, otherwise over time they’ll get out of sync.


#6

Thanks Adam, Very cool!:grinning:


#7

Still on RW 7.5 here so can’t open these, but I get the idea. I’ll have a go.

I’ve actually been able to get the effect I need by going outside of Foundry stacks, but I like the idea of only using Foundry for things.

Rob


#8

Ah, yeah, if you’re still stuck back on v7 then definitely won’t be able to open those projects. That said if you just drop the RW 8 app on your desktop you can open these up in it and check them out without disrupting your RW 7 install. It’ll at least let you see what I’ve built out.


#9

Thanks. It’s part of a larger picture for me - upgrade the OS first and before I can do that I have to…etc. :sunglasses:


#10

You can add vertical lines by adding: <img src="resources/divider.png" alt="line" height="40" width="3"> &nbsp;&nbsp;&nbsp;Home &nbsp;&nbsp;&nbsp;<img src="resources/divider.png" alt="line" height="40" width="3"> into your Page Titles. Drop the first img src after the Home page and drop the image into your resources folder.

Seems to work fine on RW7 but RW8 was a little funky. Home page looked correct, but all the other pages fattened up the line.

The Navigation stack works well within Foundry and you can add dividers: https://store.yuzool.com/item/navigation-stack

divider

`


#11

Personally I don’t know if I would do this, but that’s just my 2 cents. I think you’re inviting problems down the line.