I have this theme on my Wordpress site and as you scroll down it sticks to the top, which is great, but I want it to stay a t the top, or if you start scrolling to immediately stick, instead of it having that dead zone when you are half the way down the page.
So what you want is a basic “fixed” header.
That would generally be done by giving the element postion: fixed a top value, probably 0, and maybe a z-index to keep it on top. It may also need a top margin for the rest of the content to clear it.
Because it’s already “sticky” you will have to remove the js that makes the sticky appear.
Yea I basically want it there all the time, but this is a theme I used so there is a lot going on and it is mobile responsive at it is too. If there is no way to make it fixed to the top all the time, then maybe change the delay on the sticky effect to immediate?
Yes, I was a bit vague as I don’t do WP, though I know you have to mess around with child themes and suchlike to change stuff.
Oh, I’m sure there is, position: fixed is standard css and does exactly that.
It just may need a bit more tweaking to make it look neat. I managed to fix it by editing in Inspect, but it maybe needed polishing. And the sticky still appeared on top, doubling up on headers which will have to go.
I figured that’s what it would take, just didn’t know if that would mess up the sticky JS function, I will try that out.
It does, but the thing is, with a fixed position you don’t need the sticky js, so you can remove it altogether.
You said you had it working, what element did you target with the fixed position attribute to have it stay at the top?
The header:-
<header class="site-header-main">
</header>
They repeated all the html for the menu to make the sticky version.
So with doing that, I made it work, but it then aligns to the left and the content below it gets tucked under the menu at the top. ( I am doing this within developer tools in chrome.
nvm, I used this
header.site-header-main {
position: fixed;
z-index: 10;
width: 100%;
}
Seems to have it working well, minus the sticky menu… I think I can disable that in the theme though…
To be honest, I don’t know where it’s getting its width from, but setting it to 100% seems to work.
Giving margin-top: 10em to either the parent container, or the element following the header seems to clear it.
Yup, see my post right before yours, check out the site now, seems to be what I wanted, but the content is now tucked up under the menu, so the headings of the sites are cut off. Trying to figure out a work around without editing each page individually.
Actually, now this has become an issue, the breadcrumb row is tucked under the main menu, any advice on getting it below the actual menu?
Yes, you need that top margin to fix that. The issue I’m seeing though is at narrower widths, the menu is wrapping to a new line and increasing the header height further. Maybe bring the hamburger in sooner to cope with that.
#page { margin-top: 10em; }
Plus the header needs top:0
Nice, got it working ,added a little shadow for contrast, let me know what you think and if you see any issues?
It’s getting there, just the issue with the menu wrapping at 1142px screen width.
Yup I am looking at that now, just trying to figure this one out, it appears I don,t have access to the original css for this theme. So I am trying to find what their mobile presets are for when the menu changes.
Any idea on how I can make the mobile menu appear earlier when resizing the window?
It’s a bit tricky due the the way css is set up on the site.
Maybe changing the @media screen and (max-width: 782px) (line 23) to a bigger number may do it. But I don’t want to commit to telling you to do that in case it breaks other parts of the site. The code is unreadable enough for it not to be clear what the full effect will be.
I agree, that’s usually what I would change, but I cannot find where in the theme this part of the code is hidden.