Helloparkerg Posted December 22, 2023 Posted December 22, 2023 Is there a way to add spacing between navigation links in the drop down menu? cc: @tuanphan In addition to adding spacing between the folder links, I'd like to add additional padding to the folder itself so it's a little larger in size. You can see current site & mock in this post. Screenshot of current site: Mock:
Solution tuanphan Posted December 23, 2023 Solution Posted December 23, 2023 You can use this code to Website Tools (under Not Linked) > Custom CSS span.header-nav-folder-item-content { font-size: 30px; margin-bottom: 20px; display: inline-block; } Helloparkerg 1 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!)
Helloparkerg Posted December 26, 2023 Author Posted December 26, 2023 Thanks @tuanphan that helped. There's some awkwardness with alignment and I had to make some adjustments. You can see the code adjustment I made and also the image of how it displays. span.header-nav-folder-item-content { font-size: 16px; margin-bottom: 10px; margin-right: 20px; margin-left: 20px; display: inline-block; }
tuanphan Posted December 27, 2023 Posted December 27, 2023 10 hours ago, Helloparkerg said: Thanks @tuanphan that helped. There's some awkwardness with alignment and I had to make some adjustments. You can see the code adjustment I made and also the image of how it displays. span.header-nav-folder-item-content { font-size: 16px; margin-bottom: 10px; margin-right: 20px; margin-left: 20px; display: inline-block; } The code I tested on my site, so it can/can't work on your site. What is your site url? I can check easier 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!)
tuanphan Posted December 29, 2023 Posted December 29, 2023 Align like this? Don't remove any code in your current code. Add this CSS code .header-nav .header-nav-item--folder .header-nav-folder-content { left: calc(~"-20px - 1em") !important; } Helloparkerg 1 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!)
Helloparkerg Posted December 30, 2023 Author Posted December 30, 2023 Yes, @tuanphan that worked! Thank you so much 😊 tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment