Navbar on top of a slider

Classic General
1

How do you create a navbar on top of a slider in Foundry or UIkit3? I would like to create a page with the sliders the background and the Navbar on the slider, not sure that makes sense, Anyone has an idea?

2

Donā€™t have UI Kit but in Foundry, try this.

  1. Use a Banner stack set as ā€˜Hero Bannerā€™ with Banner style set to ā€˜imageā€™
  2. Add a Mega Menu stack (this is sold separately in the Potion Pack)
  3. Set navigation to Sticky
  4. Select ā€˜use alternative colours when stuckā€™
  5. Select ā€˜pair with parent bannerā€™ and make sure the location is set to ā€˜Topā€™
  6. Alter the background colours of the menu to suit.

Alternatively, I believe you can just drop the standard Foundry Navigation stack inside Big White Duckā€™s free Chroma stack and use its settings to achieve the same result.

HTH

Rob

3 Likes
3

:grinning::grinning: Awesome Thank Rob, have a great day

1 Like
4

Iā€™m away from my macā€¦
It can be done
https://preview.egomade.com/ultimate

5

You could also use Target for this as well.

6

In UIkit3 one way is to add a Section to the page, collapse the margins. Add your sider to the Section, if you want to restrict the width, add a Container stack first. Next, under the Slider and Container but inside the Section, place a Position stack, set to ā€œTopā€. Then put your Navbar inside the Position stack.

Sounds complex, but itā€™s really not. Itā€™s just a case of building up what you want using the individual stacks. Thatā€™s the beauty of UIkit; use only the stacks you need, thus reducing the amount of redundant settings in large stacks, thus making it really fast.

This is essentially what youā€™ll end up with, only in this instance the navbar is positioned bottom not top.

https://ci-clientservices.com/clientdev/corran/

7

I seeā€¦ Please shareā€¦ Thank youā€¦

8

JOEā€¦ You are a God in disguiseā€¦ Thanksā€¦ This software is helping me with the issues of coding and web development. I hope there will be new and more Updates in the processā€¦ Thank man

1 Like
9

Not for one second saying you shouldnā€™t buy more stacks, but why buy a stack to do something that is simple to do in either of those frameworks?

1 Like
10

You know what, You right, But sometimes some of the stacks can be helpful in other waysā€¦ But i mean you have a pointā€¦ Until the person full understand all the stacks and suck, why not

11

imho, that is what so :sweat_drops:cool :snowflake: about RapidWeaver is you can solve an issue in more than one way:

For the knowledgeable :nerd_face: , use coding or css etc.

For the programming challenged, there is a stack :sunglasses:

1 Like
12

Iā€™ve nothing against Joe or Target, Joe is a great dev and target I hear is very handy, but Ico is right, there is a stack for that, and in the case of the two frameworks you mentioned, youā€™ve already bought the stack, itā€™s in the bundle.

But hey, money, water, etc.

13

hi, hereā€™s the screengrab of how its set up in foundry

foundry_slider_banner
foundry_slider_banner2000Ɨ1242 1.33 MB

14

Its funny you do it that wayā€¦ Because I was thinking of the same way to do it. But I realized if you use mega menu At the bottom of the settings area. there is an option to integrate the menu within the banner, weather if you use the Banner or slider Stacksā€¦

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.