June 11, 2020, 4:20am
After weeks of painful trial and error, I finally figured out how to do it and had to share this. It baffles me why this isn't an option for the theme (birdseye 2), and all of the articles out there claiming they fix this are either outdated or simply don't work.
WHAT THIS DOES:
Instead of having your navigation bar "float" with your website (and stay fixed to the top of your VIEWING AREA), this keeps your navigation links at the top of your WEBSITE and removes the floatiness. Personally I think it looks cleaner.
HOW TO DO IT:
1. In your site editor, go to the "Theme" tab and then in the bottom left corner hit "Edit HTML / CSS".
2. Check that you're looking into the "main.less" file in the STYLES folder.
3. In the window with code, use the Search icon (magnifying glass) to find "body.splash-page.affix". You should now see a block of code that looks similar to:
body.splash-page.affix .birdseye-header {
position: fixed;
top: 0;
background: rgba(35, 35, 35, 0.95);
padding: 10px 30px;
}Even though it says "splash page", this works for my header pages (what I mainly use) and non-header pages.
4. You're going to comment this out by sandwiching it between /* and */, so it should look like:
/*
body.splash-page.affix .birdseye-header {
position: fixed;
top: 0;
background: rgba(35, 35, 35, 0.95);
padding: 10px 30px;
}*/
Make sure you include the closing curly bracket } at the bottom in the sandwich. That block of code should turn GREY.
Your webpage in the preview window below should reload immediately with the new modifications.
5. To test it, scroll down in the preview window and hopefully the nav bar now remains at the top of your website, going out of sight when you scroll down!
You only need to make this change once and it will apply to all of your webpages.
I hope this helps someone out there.
If anyone sees any potential improvements or holes with this, please let me know and I'm happy to update. I found this through trial and error and so far it's working for me.
