-
Posts
-
So I am using CSS tags to jump around my main page from the menu. This was all working fine until recently. Now the links miss their marks by quite a lot. Also if you click the link a second time it will then go to the correct location. It’s very weird and I am having a hard time even searching for this issue online. Please advise.
ps I have seen things about sticky headers not being accounted fro and requiring an offset, but this doesn’t seem to be that.
Hi Don,
Thanks for reaching out with your Crio WordPress theme questions. I’m not exactly sure why your links are behaving this way but one thing you can try is placing your CSS/ID identifier a level above the element.
For example if you’re directly linking to an image or string of text try moving your CSS/ID selector to the column or row that holds that element. This small adjustment might help the identifier hit its mark when jumping to the item
I hope this helps! Please let us know if you require further assistance with this.
So I just tried moving the link to the extremes. I tried the section, and the I tried the highest level row. No change. Also this isn’t an issue in firefox. It is an issue in Chrome and Safari. So there is also that little weirdness. Any other ideas?
Thanks Don,
It sounds like you’re encountering a browser-specific issue. Here are a few things you can try to address this since offsetting the anchor links was unsuccessful:
- Check for conflicting CSS: Sometimes, CSS styles can interfere with the smooth scrolling behavior. Try temporarily disabling any custom CSS related to scrolling or anchors to see if it resolves the issue.
- Update browser and plugins: Make sure your Chrome and Safari browsers are up to date, as well as any related plugins or extensions.
- Use browser developer tools: Use the developer tools in Chrome and Safari to inspect the behavior of the anchor links. Look for any errors or warnings in the console that might give you a clue as to what’s going wrong.
- Test on different devices: Try testing the anchor links on different devices to see if the issue is consistent across all of them.
- Check for JavaScript errors: Look for any JavaScript errors that might be occurring on the page, as these can sometimes interfere with the smooth scrolling behavior.
We’ll also set this up in our own dev environment and see what we can find. Please let us know if anything stands out when inspecting your site for errors.
Thanks Don!
It sounds like you’re experiencing an issue with anchor links on your website, where clicking a link doesn’t take you to the correct part of the page on the first try, but works on the second click. This can indeed be a puzzling issue. To better assist you, I have a few questions that will help narrow down the possible causes:
- Recent Changes: Have there been any recent changes to your website or updates to BoldGrid, WordPress, or any plugins that coincide with the issue starting? Knowing if something changed right before the issue appeared can help identify the cause.
- Sticky Header Confirmation: You mentioned that you don’t believe it’s an issue related to a sticky header requiring an offset, but could you confirm if your site uses a sticky or fixed header? Even if you think it’s unrelated, such headers can sometimes cause issues with anchor link positioning.
- JavaScript or CSS Modifications: Have you added any custom JavaScript or CSS to your site recently that could be affecting how the page loads or behaves?
- Theme or Plugin Conflict: Are you using a custom theme or have you installed any new plugins around the time the issue started? Sometimes, conflicts between themes or plugins can cause unexpected behavior.
- Browser Behavior: Have you noticed if this issue occurs across all web browsers or is it isolated to a specific one?
- Page Loading: Does your page have content that loads dynamically or images that might take longer to load? Sometimes, if the page content loads after the initial jump, it can affect the scroll position.
Providing answers to these questions can help diagnose the issue more accurately.
Yeah so as you numbered them:
1. Recent Changes – It’s a brand new site not even done yet. So lot’s of changes.
2. Sticky Header – There is one, but turning it off didn’t change the problem
3. custom code – nope
4. theme/plug – there is an instagram feed plug that does coincide with the issue. I just rebuilt the page with the problem and it was all fine until the plugin was added. So I deleted it and the problem went away. Then I added it back and the problem returned. But the kicker is it is now not tied to the plug and even if I delete it the problem remains. So somehow the page becomes permanently broken once the plug is there, even if removed.
5. Browser – yeah no problem in firefox. Chrome and Safari are the problems
6. page loading – the instagram plug does load a bit slower. The height bump from the loading doesn’t match the misalignment of the links. the first click of the link is off by about half of the height of the instagram feed. Also even if I put the plug at the bottom of the page it doesn’t change the problem (it’s normally right near the top).
Hi Don,
Thank you for your reply, we were unable to replicate this exact behavior in our testing environment but we can still help.
I have a theory on the anchor tag scrolling issue. If you’re using something like the responsive utilities in the Post and Page Builder editor for your anchor tags but only have them #ID’d in one screen size so it doesn’t work in others. We inspected the site on our end and it could just be that the anchor tags need to be reconfigured for each screen size.
Another thing that I noticed, the “Podcast & Broadcast” link is
/main/#podcastand that works but all the others are ex:/#music,/#team, etc do not. You have a BoldGrid premium license key and if you would like we can get you over to premium support where we could log in to the site using a temporary access plugin and address the issue directly.Please let us know if that works for you.
So I just got your latest reply. Yes the site is a mess at the moment as I have been troubleshooting like crazy and a lot of things are broken at the moment. I did initially have id’s setup in responsive elements for all screen sizes. I stripped those thinking they may be the issue (it was around adding this that problems started). How do I get to premium support? It is not obvious, otherwise I would have done that from the start.
Also the /main page is me recreating the original home age to see where, when, and if the problem arose again. And one more touch of strangeness, the id links always worked when going to a different page. So if you on the /home page and hit the /main/#podcast link it goes exactly where it should. But if you are on /main and hit the /main/#podcast link it goes wrong. Same when it was all on the /home page.
Also I tried a different instagram plug and problem still there.
It’s been a very perplexing issue.
Ok I have restored the site to how it “should” be. There are css ids for the mobile and desktop view. This is where I got to when I started trying to fix the issue. The mobile menu doesn’t work at all. the desktop links do the weird miss on the first click then get it right thing. Everything else is as it should be, the site is basically done other than this menu issue.
You can now ignore the /main page.
Hey Don,
Sorry, we had a response for you but I may not have submitted correctly, Thanks for restoring the site, we checked it out and I see exactly what you mean and that is odd. You can reach premium support by following this link. Basically you want to log into your BoldGrid Central account. Click the help icon in the upper right hand corner and scroll down to Premium Support.
Thanks a lot we’re looking forward to assisting you further!
Hey so I don’t think I ever made a boldgrid account. I setup the site with dreamhost and boldgrid premium just came with the wordpress site service. What do I do?
Hey Don,
That makes sense, DreamHost is one of our premium hosting so that makes the process even easier. You can access your BoldGrid Central account by using the same credentials you would use to log in to your DreamHost web hosting account, just follow this link to the login page.
Thanks Don, we’re looking forward to inspecting this further with you. If it does prove to be a bug we’ll create a bug ticket to hopefully have it patched in an upcoming Crio update.
- The topic ‘CSS Anchor Tags not Functioning Properly in Crio WordPress Theme’ is closed to new replies.
