How to make category selector sideways via css


(Bank Live) #1

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:


(Joshua Rosenfeld) #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.


(Stephen) #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.


(Bank Live) #4

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


#5

/admin/customize/themes

Then edit the CSS to add the code above.


(Bank Live) #6

I copy to paste it not work.


(Stephen) #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?


(Bank Live) #8

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


(Stephen) #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.


(Joshua Rosenfeld) #10

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


(Bank Live) #11

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

(Stephen) #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.


(Bank Live) #13

No work. :joy: but will try.


(Bank Live) #14

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