How to make category selector sideways via css

Hello @rewphus I like a categories at you make in website.

I want to make same categories from example pictures. I can it how to make. Thank you very much. :grinning:

Edit: Yeah, it’s CSS. It’s technically public but I’ll leave it up to Ryan if he wants is shared or not.

2 Likes

Looks like the selector:

@media (min-width: 1280px) desktop-scss-stack.scss:95 .list-controls .category-breadcrumb li:first-of-type>a.badge-category:first-of-type

sets:
transform: rotate(-90deg); transform-origin: right bottom 0; background-color: transparent !important; font-weight: bold; font-size: 5em; position: fixed; right: 87vw; text-align: right; min-width: 80vh;

Which rotates, repositions and offsets it to the left. Almost certainly not the entire style, but a start.

3 Likes

How to set in customize>themes>Edit:CSS :sweat_smile:

/admin/customize/themes

Then edit the CSS to add the code above.

I copy to paste it not work.

Show us what you pasted and where you pasted it.

Is the style you created currently applied to your site?

Are you doing this on a live community, or a test instance somewhere?

2 Likes

I’m not sure if it’s set correctly. :sweat_smile:

Yep, you need {}

So:

@media (min-width: 1280px) desktop-scss-stack.scss:95 .list-controls .category-breadcrumb li:first-of-type>a.badge-category:first-of-type {
transform: rotate(-90deg); transform-origin: right bottom 0; background-color: transparent !important; font-weight: bold; font-size: 5em; position: fixed; right: 87vw; text-align: right; min-width: 80vh;
}

@jomaxro image above isn’t lightboxing either.

Yeah, @zogstrip is aware and has cloned the site so he can test locally.

2 Likes

it show

Error: Invalid CSS after "...-width: 1280px)": expected "{", was "desktop-scss-stack."
        on line 1 of theme_field.scss
>> @media (min-width: 1280px) desktop-scss-stack.scss:95 .list-controls .category
   -------------------------^

The text in your editor isn’t wrapping, so we can’t see what you’ve entered.

Try formatting it like this:

@media (min-width: 1280px) desktop-scss-stack.scss:95 .list-controls .category-breadcrumb li:first-of-type>a.badge-category:first-of-type {
transform: rotate(-90deg);
transform-origin: right bottom 0;
background-color: transparent !important;
font-weight: bold;
font-size: 5em;
position: fixed;
right: 87vw;
text-align: right;
min-width: 80vh;
}

I’ve not dug into it too far, even with this in place you may need to make other styling changes.

2 Likes

No work. :joy: but will try.

Now i can make it work follow as me want. :smiley:

1 Like