How to change the look of the list items

Hi there!

I made this change to the list styles in the last update and am still trying to find the best way to implement this.

If you set the list-style-position to “inside” the list bullet will line up with the edge of the rest of the text. However, then multiline list items will wrap to also be lined up on this edge, and this doesn’t look very good. The solution is to keep the list style position set to “outside” but to also add a 1em padding. However, since ul are sometimes used for navigation or other elements, I don’t want to add this automatically to all lists. The way this is usually handled is require users to add a class to lists that are to be styled.

This is not so great at the moment, but with Gutenberg coming, I will be able to create an interface for doing this more easily.

For now add this CSS to your site.

ul, ol {list-style-position: inside}`

To make it so the bullets are in a gutter and the list text doesn’t wrap, add a class to the list and style like so:

.tr-list {
    list-style-position: outside;
    padding-left: 1em;
}

Let me know what you think about the idea of needing to add a class to the list to add “extra” styling.

Thanks,
Sky

thanks, I think this would be a good addition. Adding ‘ul, ol {list-style-position: inside}’ works, but the wrapping is an issue. I’ll try adding the class, but I need to figure out how this works. Thanks for your support though!

I think making this an easier option to style would be great!!

You could also try this:

.entry-content ul, .entry-content ol {
    list-style-position: outside;
    padding-left: 1em;
}

If this works well without breaking any standard content, I may add this to the theme styles by default.

Let me know if that works for you!

Thanks,
Sky

Works great thanks. While we’re on it I have one more issue: in the mobile view the logo distorts over a height of 38. (Using navbar as menu and the spread lay out.) Any ideas?

Hi again.

Thanks for pointing that out.

Here is the fix, which I will add to the next release.

.logo-wrapper { flex-shrink: 0; }

Take care,
Sky

thanks that also worked…. ??

just one more thing: I want to make the navbar (and logo above) “sticky”.

I have the general option to make the header sticky but that seems to do nothing. I’ve tried plugins, but I can’t seem to define the right class to do this. (My html/php/asp work has been mostly pre-CSS so this isn’t my strong suit.)

Hi there!

In addition to being able to make the main header area (with branding and header nav) sticky, you can also set the top nav or navbar to be sticky as well.

These settings are in Customizer > Navigation > Navbar > Tab: Fixed
and
Customizer > Navigation > Top Nav > Tab: Fixed.

No need for additional plugins.

Hope this helps!

Sky

This does work for the desktop version, but on android & iphone this doesn’t seem to stick ?? I was mostly looking to use this specifically for phones…

I see. yes, in this theme, the sticky header is only enabled on laptop and up. In the past, sticky headers caused too many issues on mobile devices. This may have changed in the last few years, and at some point I will revisit it and possibly make it an option for all device sizes.

For now though, it is only available for laptop and desktop screens.

Thanks,
Sky

Ok thanks!