Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Candela_Studio

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

Question

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

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 1

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

 

Share this post


Link to post
  • 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? 

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...