Sidebar dropdown menu from navigation bar - spacing issue on mobile viewing

Hello,

I started off with the Bedford template. On the 'ABOUT'  tab on the navigation bar, I have a dropdown side bar with links to 4 different pages: 'OUR PRINCIPLES' / 'OUR PROCESS' / 'OUR EXPERIENCE' / 'COLLABORATION'.

When viewing the sidebar / dropdown on either desktop or tablet, the sidebar spacing is centered perfectly fine. But when you view on a mobile device, the links are off center (text is much closer to the top of the surrounding box than the bottom). See attached screen shot from a phone, which highlights the issue.

Greatly appreciate if anyone could help me out with this query:

My website is https://www.candelastudio.co.uk/ 

Thanks - Candela Studio

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#sidecarNav .folder-toggle.active~.subnav,#secondaryNavWrapper .folder-toggle.active~.subnav {
        padding-top: 1em;
        padding-bottom: 0;
    }
}

17 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#sidecarNav .folder-toggle.active~.subnav,#secondaryNavWrapper .folder-toggle.active~.subnav {
        padding-top: 1em;
        padding-bottom: 0;
    }
}

 

Thanks you tuanphan for such a quick reply! That has worked perfectly.  

I don't suppose you would have any suggestions on the other query I posted?