I’m curious why I need to add the !important bit to this code to get the header section of this page to stick: https://www.templaterepo.com/demos/takeaway/index.php
Code…
.cusSticky {
position: fixed !important;
top: 0;
width: 100%;
}
It’s not a problem, I’d just like to understand why.
Cheers.
Not on a device where I can check the code. Did you add it to the wrapper class box?
I think so. At least, I added it to the only one in which it worked at all: The “Outer Class” of the main container for the element.
I was just surprised it needed !important, although it might well be my understanding of how containers work is wrong!
There is no issue or rush, if you want me to send you the project I can, no bother.
You could try using a Coder set to text and make it a header. Then try the same code without the important. Look at the code to see what’s different between using a normal header stack and the Coder one.
If I post up a question about how best to stop the soil on the bank in my garden from sliding down, are you going to say “try the coder stack?”
;-)
It shouldn’t need it. None of the positioning is set with important. Not in a position to check though for a bit. Got a load on at the minute.
If it works with it then that’s all you really need for now?
Absolutely. I don’t need a “fix”, just curious what is happening.
If you get the chance to look at it at some point and report back, great, but it’s not !important.
(See what I did there?).
In inspector, click on Computed and look for position. You will see that it is set to relative. Now click on the small grey arrow at the end of that position: relative line and it will show where that is being set.
…and so the more correct way to do it rather than using !mportant you can then just trump that CSS by making yours more specific
.stripped-outer.cusSticky{position:fixed}
@steveb Another way if you are now aware of it, is to add fixed-topwhen you have the Utility Class stack on the page.
What utility stack? Are you not over complicating this?
Tavs code worked with a bit of editing…
.stripped-outer.cusSticky {
position: fixed;
top: 0;
width: 100%;
}The Utility Stack included in Source and documented here
I’m simplifying if anything, because you can just add fixed-top with no need to add any of your own css. Loads of ways to skin this cat.
I’m just showing an alternative which end users may be more comfortable with, and also highlighting that this is already built into Source when you add the Utility Stack.
Ha! I had all my existing Source stacks in a folder, didn’t spot that new ones had been added.
Cheers!
Just a note to say that is an Addon stack so probably no use for this project.
You’re right, but it’s handy to have. I’m doing some site rebuilds soon and plan to use Source, so it’s good to know there are now more stacks in the set, which I hadn’t realised existed!
I wasn’t aware of that. Using Source without the Addons for real work, is a travesty IMHO. Best £20 you will ever spend on RW.
This is for a free project givaway, so I’m using only free stacks, apart from Paysnap.
The basic stacks are a good way to start with Stacks and building some free form pages for free. Or to just use it as a base for third-party stacks. Hopefully something for everyone…
But yes the Addons are a steal ;)
You should consider taking part exchanges of old stacks to allow stingy Weavers to get a reduction. I’ve certainly got a few I don’t use.
A scrappage scheme. Might just work. Though I sacrificed my beloved Peugeot 106 during such a scheme about 10 years ago and immediately regretted it. Such a fine little machine - she’d still be running now!