I’m using this code to change the css of <header> if the .butmore link is active. If .butmore is active, then I want to change the position of <header> to fixed. But the <header> CSS is not changing once .butmore is active. The inline css doesn’t change at all:
By default, <header> is set to fixed, but this needs to change once .butmore has a class of active.
Why are you saying ‘if’ ? Either its clicked or its not.
Simply set/remove a remove a class on the header at the same time you set .active on the .butmore and then use css.
It is best to use css for the css change as it is likely that as you are changing the header from fixed to relative then you will need to change a number of other properties on the header (e.g. width for a start will need to be 100% and of course the co-ordinates should be defined ) and maybe changes on other elements to compensate for the now fixed header. It may indeed be better to add a class to the body tag so that you can control any other element on the page at the same time using a new class on the body.
But as I pointed out you would be better doing this by adding classes with js to style the elements rather than injecting css directly.
Is it? I have to guess as you didn’t show it.
A fixed element needs a width and top left positions and probably z-index greather than other elements on the page. A relative element needs none of those. A fixed header element requires some top padding or margin to the first element on the page otherwise you will never ever see it as it will be behind the fixed element.