- This topic has 17 replies, 3 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hi, you all are so great at solving my problems and while I’ve learned a lot and am trying to do things on my own, I’ve hit another wall.
ok, over at varnelis.net, I am trying to normalize the spacing in the left sidebar.
for example, between about and blog, there is too much space, and the same between articles, mastodon, and audc. In most of these cases, I guess it’s because these are separate blocks (although I’ve tried to eliminate padding via CSS and the sliders in customize).
do you have any tips to make this work for me?i also want a different sidebar on all my blog pages (which i kinda have now, kinda… honestly don’t even remember how).
it seemed to me that the way to go would be to create an element block. yes! great idea, but that second indented section (apparently my indents aren’t matching either) beginning with on the destruction is a submenu of primary navigation and the navigation menu just doesn’t do what I want in the element. It has a very different layout and also doesn’t expand the submenu.
any thoughts on how to best make this all work? thanks!
Customer Support
Hi there,
You are using <p> element in your sidebar, for example, about/blog/articles/mastodon, <p> element comes with certain margin bottom by default, but there’s also other sidebar-specific CSS affecting it. So it gets completed in your task.
You can add this CSS to remove the default margin bottom from <p>:
.sidebar .widget p { margin-bottom: 0; }Also, each widget has its margin-bottom, I would recommend group some of the widgets into one widget to avoid unwanted margins.
Hi, ok, so the only way that I could make most of the spacing work was to hard code links in the sidebar in unordered lists, but unless there is some good reason not to do it, it seems to work.
Two things remain.
1. What’s the best way to make the blog page different in generatepress? I was hoping to build a left sidebar as an Element, then duplicate it and make some changes, but because menus don’t work well in Element (see above), it doesn’t seem like the way to go. I guess I can use
2. Take a look at the second entry in the latest posts block, the one that wraps around. How do I adjust that spacing?Thanks!
Customer Support
1. In what way different? Are you referring to a totally different sidebar? If so, you can use a Block Element – Sidebar.
Then, to add a menu, you can add a WordPress Navigation Block. We can use custom CSS to alter the design of this.
2. To clarify, do you want to prevent it from wrapping around? Or, do you want to alter the padding or margin it has?
Re 2. The text that is wrapping around has a different spacing, I guess because there is no line break? How do I change that?
Re 1. I want the menu to be open at all times. Is that what you’d use the custom css for?
1. Are you referring to the Nav Widget? If so, it seems to be appearing on all views. If you’re referring to something else, let us know. Needing CSS to make a nav appear all the time depends on what Nav you’re referring to.
2. To clarify again, are you referring to adding spacing here?: https://share.getcloudapp.com/6quNBg6q
1. It’s working as I want it everywhere now using context aware sidebars. Except for a bug—which I had seen before—which is that it won’t work on blog archives (https://varnelis.net/2006/01/).
2.Yes, I want the spacing between entries to match the spacing that appears when lines wrap, or at least I want the option to tune that spacing too.
1. I see. It might be good to reach out to Content Aware Sidebars regarding this issue.
2. If that’s the case, you may need to rely on line-height as opposed to margins. For instance, you can try adding this CSS through Appearance > Customize > Additional CSS to see what I mean:
ul.wp-block-latest-posts__list.wp-block-latest-posts li { margin-bottom: 0; } ul.wp-block-latest-posts__list.wp-block-latest-posts li a { line-height: 2; }Well, I thought you had it solved for me. That worked… until I got wrap-around in the other menu items.
Take a look at the first item under work to the left, the spacing is off again. Any ideas what I’ve done wrong? I tried to set the css for those links but
1. I’m not really sure I picked the correct css classes.
2. Spacing the wraparound text properly meant that the spacing between links was off.Any thoughts?
I see. The selector needs to be fixed. We need to add a CSS class.
Try using this instead:
ul:is(.wp-block-latest-posts__list.wp-block-latest-posts, .menu) li { margin-bottom: 0; } ul:is(.wp-block-latest-posts__list.wp-block-latest-posts, .menu) li a { line-height: 2; }Let us know how it goes.
I’ll try that, but the work menu is a navigation menu, not latest posts. Not exactly sure how to select it.
Alright, let us know how it goes.
If you want it specific for that sidebar as well, you can use this code instead:
.inside-left-sidebar ul:is(.wp-block-latest-posts__list.wp-block-latest-posts, .menu) li { margin-bottom: 0; } .inside-left-sidebar ul:is(.wp-block-latest-posts__list.wp-block-latest-posts, .menu) li a { line-height: 2; }Perfect! That worked. You are fantastic, Fernando!
You’re welcome, catbiscuits!
Oh boy, I have to ask pretty much the same thing again… as the menu has evolved, I created a new submenu within one of my navigation menus and I can’t figure out how to select the top level item that reads “critical ai art…” There is too much spacing above and below it, but why? Why? I’ve tried inspecting the element in Safari and I can’t figure out why this is the case. I’m sure you can solve the problem but maybe you can tell me what I can do to make this easier? It’s like I can’t identify the proper CSS classes…
- You must be logged in to reply to this topic.
