How can I make sure my main page content doesn't overlap with my mobile navbar?

Store Design
1

I’m having a lot of trouble with my mobile navbar recently. Now on my product page only, the main page content overlaps with the mobile navbar.

Is there any fix for this? Thanks in advance!

I use Shopify theme Brooklyn.

VFlex_1-1634302162380.png
VFlex_1-1634302162380.png1280×1024 171 KB

desktop view and desktop navbar.

VFlex_2-1634302194083.png
VFlex_2-1634302194083.png1280×1024 364 KB

mobile view with mobile navbar

website: veganflex.co.uk
pw: peothu

2

Hii, @VFlex
Paste this code on top of the timber.scss file.

@media screen and (max-width: 768px){
div#PageContainer {
    margin-top: 50px !important;
}
}

Thank You.

3

Thanks! worked perfectly! By the way, do you know how I can change the style of the open menu when you click the menu burger in mobile view?