How to make category selector sideways via css

dev
1

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

http://tidbits.io

el1
el11647×865 167 KB

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

2

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
3

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
4

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

5

/admin/customize/themes

Then edit the CSS to add the code above.

6

I copy to paste it not work.

7

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
8

ee2
ee2.jpg1387×927 147 KB

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

9

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.

10

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

2 Likes
11

ee3
ee3.jpg1459×913 159 KB

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
   -------------------------^
12

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
13

No work. :joy: but will try.

14

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

ee4
ee4.jpg1389×673 150 KB

1 Like