I have a one page design going on with my updated site, and the header navigation links point to various row IDs on the page.
Unfortunately I'm using the new material design (layout based off of the wellness template), so my header has no background, fully transparent all the time.
Therefore I'm finding the scroll to Row ID takes me a little lower than I'd want. I've attached an image to show where it scrolls me to.
Is there a way I can offset the ROW ID by between 10-50px above where the row actually starts? To accommodate for the header text not sitting over the column text?
Best example is for clicking "Work" in the related URL link.
Another way to go about this would be to set some top padding on the row with the ID that's being used for the anchor link position, and then "remove" the space in the DOM by using a negative top margin.
Sorry if this was a dumb question, just want to make sure I enter the aforementioned code into the correct spot. And how to do it for multiple row IDs.
Hey Gavin, sorry for missing this ticket - after my last response I forgot to reassign the ticket.
The code I provided would go into the Salient options panel > general settings > css/script related tab in the custom Custom CSS box. If you need to add it for more rows, you can keep adding more row IDs into the selector like so:
No worries at all, crazy times and I understand how things can slip through the cracks!
While this did fix the issue, it did seem to create more issues.
Above #work I had a "Waves Opacity #2" Shape divider. (Love those things they look so sleek!). When adding the code it chopped off the left side of the divider.
I also saw a funky artifact for #about, which is right underneath my portfolio grid. The portfolio grid started extending out below the background and onto the about section.
For #reel it also cropped off the bottom of my header image, so it no longer has that cool "blending into a solid color" effect (though I didn't provide a screenshot example of this issue).
I understand if this is all too much and I'm just digging myself in a deeper hole, but if there are any ideas you may have, I'd really appreciate it!
That popped out an issue with my background image for #reel, and portfolio items started stacking on top of each other over the #about section.
When I kept just the work section (as this is the part where the menu header sits over portfolio sortable text so was my priority to fix), the row background opacity worked for revealing the divider up top, but it meant the padding added to the bottom was black, so there was just a 100px black bar at the bottom.
I took out the bottom padding code and #reel and #about, and that seemed to give me the most success. Albeit the padding between the portfolio and the about section is quite tight, (only a few px) I think that is a good compromise to not get the menu text on top of the portfolio sortable section.
Hey!
I have a one page design going on with my updated site, and the header navigation links point to various row IDs on the page.
Unfortunately I'm using the new material design (layout based off of the wellness template), so my header has no background, fully transparent all the time.
Therefore I'm finding the scroll to Row ID takes me a little lower than I'd want. I've attached an image to show where it scrolls me to.
Is there a way I can offset the ROW ID by between 10-50px above where the row actually starts? To accommodate for the header text not sitting over the column text?
Best example is for clicking "Work" in the related URL link.
Thanks!
Gavin
Hi Gavin,
Try adding margin top to column.
Thanks.
Hi Andrew, Thanks for the response.
I thought about doing that, but it messes up with the padding between the two rows, adding more of a gap than I'm looking for, especially on mobile.
I like the spacing between rows as it is, I just need the header navigation to land a little higher up so as not to be overlapping the text.
Thanks
Hey Gavin,
Another way to go about this would be to set some top padding on the row with the ID that's being used for the anchor link position, and then "remove" the space in the DOM by using a negative top margin.
For example:
div#work { margin-top: -100px!important; padding-top: 100px!important; }Awesome, that sounds like it will do the trick!
Forgive me, but I'm not sure where the DOM is, where should I enter that code?
And if I need to do it for multiple row IDs, I just duplicate the code again and change #work to the other row ID?
Sorry if this was a dumb question, just want to make sure I enter the aforementioned code into the correct spot. And how to do it for multiple row IDs.
Thanks!
Hello! Just a bump on this ticket. Would really appreciate some guidance with using that code so I can see if it will resolve my issues! Thank you!
Hey Gavin, sorry for missing this ticket - after my last response I forgot to reassign the ticket.
The code I provided would go into the Salient options panel > general settings > css/script related tab in the custom Custom CSS box. If you need to add it for more rows, you can keep adding more row IDs into the selector like so:
div#work, div#about, div#home { margin-top: -100px!important; padding-top: 100px!important; }No worries at all, crazy times and I understand how things can slip through the cracks!
While this did fix the issue, it did seem to create more issues.
Above #work I had a "Waves Opacity #2" Shape divider. (Love those things they look so sleek!). When adding the code it chopped off the left side of the divider.
I also saw a funky artifact for #about, which is right underneath my portfolio grid. The portfolio grid started extending out below the background and onto the about section.
For #reel it also cropped off the bottom of my header image, so it no longer has that cool "blending into a solid color" effect (though I didn't provide a screenshot example of this issue).
I understand if this is all too much and I'm just digging myself in a deeper hole, but if there are any ideas you may have, I'd really appreciate it!
I appreciate the understanding, Gavin
If the negative margin workaround was applied to all the rows on your page, it would need to be changed a little. Try this instead:
#work, #about, #reel { margin-top: -100px!important; padding-top: 100px!important; padding-bottom: 100px!important; } #work .row-bg { opacity: 0; } #work .portfolio-items { background-color: #252525; }Hi,
That popped out an issue with my background image for #reel, and portfolio items started stacking on top of each other over the #about section.
When I kept just the work section (as this is the part where the menu header sits over portfolio sortable text so was my priority to fix), the row background opacity worked for revealing the divider up top, but it meant the padding added to the bottom was black, so there was just a 100px black bar at the bottom.
I took out the bottom padding code and #reel and #about, and that seemed to give me the most success. Albeit the padding between the portfolio and the about section is quite tight, (only a few px) I think that is a good compromise to not get the menu text on top of the portfolio sortable section.
Thanks for your help!