Is there a way to make it ‘sticky’ or scroll with page?
Chroma.
1 Like
It’s not inbuilt but if you drop it into BWD’s Chroma stack then you can use that to make it sticky. That’s what I’ve used on some of my pages on the site.
OK will do - Thanks.
At my desk now, so had a play and you can also use custom css, nowadays my preferred option for most simple tasks. Obviously not trying to take away from Chroma, but for simple things might as well keep the code to a minimum. (Tav has drummed this approach into me!)
Stick the menu in a container, and apply this to the custom css inner setting option: cusSticky (change at will). Then add this to global or page CSS…
.cusSticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
2 Likes
That’s definitely a good approach for a fixed menu. A sticky menu is a bit different though as it is one that starts further down the page and then sticks when it gets to the top. You also need a bit of JavaScript for this approach if using own code.
Oh yes, good point. It’s early.
;-)
(Runs off of work out how to do that without a stack).
Sorry for jumping in on this post but as its Source menu related, just how do you change the background colour of the menu bar !! Apologies for being dumb I know but Im not seeing it !!
Also - if you are going to use position fixed like that remember that you must pad the body down equal to the height of the nav that you have just removed from the flow or else the top of the page will disappear underneath it.
There is a new css position sticky but it does not have complete browser support. In addition you need to be careful where you are applying these properties- i.e. which div is the target of the custom class setting. Always check in the inspector as there will be differences with normal and inline stacks. Similarly differences depending on whether you use the new S4 custom class or a 3rd party stack custom class setting.
It’s all simple CSS but just know where and what you are applying is a good general rule to live by.
@Jannis I couldn’t get it to work with Source using the class nav-wrap. There is a slight complication with the Source nav being an inline stack in that you can’t add a class name.
1 Like
Is this for the Headless stack? It would work if the navbar is fixed first using the code like steve gave:
.nav-wrap {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
You can just use the.nav-wrap class in both cases (for fixing and in Headless). I should probably add in a custom class field for the nav bar.
1 Like
Yes it was in response to Jannis’ question which appears to have now gone AWOL.
A custom class field would be handy.
Yeah, I removed my question, as I afterwards realized it would only work if already fixed. Sorry my fault.
Here again:
@habitualshaker Could you check if this would also work with New free stack: Headless Stack ?
1 Like
If you want a slide away nav then SlideUp will work with the Source Nav - it also supports sticky slide away as well as fixed.
Chroma of course does all this as well which is where we started.
1 Like
FFS !! missed that completely and been on it for 2 days lol ,thank you Steve
Its a very good bit of kit , I have absolutely no idea what im doing.