Navbar Overlapping Content on Product Listing Page

[Lokesh-Bijarniya]

Issue Report

Title

Navbar Overlapping Content on Product Listing Page

Description

On the product listing page of the website, the navbar remains fixed at the top as the user scrolls down, causing it to overlap with the content below. This makes some of the product information (such as images and descriptions) hard to see or interact with. The issue affects both desktop and mobile versions of the page.

Steps to Reproduce the Issue

1. Action 1: Open the product listing page (URL: https://www.scrollme.online/products).
2. Action 2: Scroll down through the list of products.
3. Action 3: Observe that the fixed navbar stays at the top of the screen and covers part of the product listings as you scroll down.

Expected Behavior

The product listing page should display the products fully without being obscured by the navbar. Ideally, there should be padding or a margin between the navbar and the content so that the product images and descriptions are visible.

Actual Behavior

As the user scrolls down, the product listings become partially hidden behind the navbar, making it difficult to view or click on certain items.

Screenshots

Additional Context

• The issue occurs on both desktop and mobile browsers (tested on macOS Ventura with Chrome and iOS 17 with Safari).
• The page affected is the product listing page under the "Shop" section.
• The issue may be related to the CSS position: fixed property used for the navbar, which makes it overlap with the content instead of pushing it down.

Thank you for taking the time to report this issue! We appreciate your help in improving our project.

[Lokesh-Bijarniya]

@thakuratul2 Could you please assign this issue to me under gssoc-ext and hacktoberfest ?

[thakuratul2]

@Lokesh-Bijarniya assigned