Jump to content

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

Recommended Posts

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

Candela studio side bar.jpg

Link to comment
  • Replies 2
  • Views 700
  • Created
  • Last Reply

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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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? 

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.