I am trying to create my portfolio website. I am having a problem related to in Navbar and carousel of website. I have a navbar as the header of my website which has links to ids for lower sections such as know more, projects, etc. Now, when I click on the links in navbar, the page scrolls down to required id, but a part of that component goes hidden behind my navbar because I have set the navbar as top-0 fixed.
In the carousel, I have given id to the image to be scrolled when clicked the perticular scroll button. Here as well the same issue arrises as, when i click on the control button of carousel which intern is for the perticular image id, the page scrolls to the top and hence some part of my image gets hidden behind the navbar. How can i prevent the hiding of image/some other section behind the navbar.
Tech stack used - NextJS, TypeScript, Tailwind CSS, DaisyUI(a popular tailwind plugin)
Another problem that I am facing is with the custom cursor i made for this website. The custom cursor, sometimes, doesnt load immediately until the user voluntary takes the cursor to top navbar and brings.
For solving the hiding behing navbar problem,
- i tried manipulating(lowering) the window.scrollY position or tried some stuff through window.scrollTo(x, y).
- Tried event.preventDefault() on clicking control buttons of carousel.
Eventually i couldn't succeed. My only goal here (in order of preference) is that,
- When I click on the carousel control buttons, the images change, but the screen's Y axis (vertical) scroll position remains unchanged.
- The section title should not be hidden behind the navbar if I click the control buttons of Navbar items.
A solution for this could be setting the scrollY position manually, but it too didn't workout/i incorrectly did it.
Also for custom cursor issue, I didnt find any solution.
(p.s. I shared the github link because most of the components are linked and sharing code in question is difficult. If you need the code to be in question, i can surely do it)
