# How to make category selector sideways via css
**URL:** https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363
**Category:** Development
**Created:** [10월 18, 2017, 6:20오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363 "2017-10-18T18:20:32Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 18, 2017, 6:20오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/1 "2017-10-18T18:20:32Z")
Hello @rewphus I like a categories at you make in website.
[http://tidbits.io](http://tidbits.io)
I want to make same categories from example pictures. I can it how to make. Thank you very much. 😀
---
### Author:  [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [10월 18, 2017, 6:25오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/2 "2017-10-18T18:25:29Z")
Edit: Yeah, it’s CSS. It’s technically public but I’ll leave it up to Ryan if he wants is shared or not.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [10월 18, 2017, 6:31오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/3 "2017-10-18T18:31:34Z")
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.
---
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 18, 2017, 6:45오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/4 "2017-10-18T18:45:34Z")
How to set in customize\>themes\>Edit:CSS 😅
---
### Author:  [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [10월 18, 2017, 6:46오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/5 "2017-10-18T18:46:35Z")
/admin/customize/themes
Then edit the CSS to add the code above.
---
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 18, 2017, 6:50오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/6 "2017-10-18T18:50:57Z")
I copy to paste it not work.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [10월 18, 2017, 6:51오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/7 "2017-10-18T18:51:44Z")
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?
---
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 18, 2017, 6:59오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/8 "2017-10-18T18:59:37Z")
I’m not sure if it’s set correctly. 😅
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [10월 18, 2017, 7:01오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/9 "2017-10-18T19:01:18Z")
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.
---
### Author:  [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [10월 18, 2017, 7:03오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/10 "2017-10-18T19:03:26Z")
Yeah, @zogstrip is aware and has cloned the site so he can test locally.
---
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 18, 2017, 7:07오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/11 "2017-10-18T19:07:04Z")
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
-------------------------^
```
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [10월 18, 2017, 7:09오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/12 "2017-10-18T19:09:48Z")
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.
---
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 18, 2017, 7:14오후 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/13 "2017-10-18T19:14:21Z")
No work. 😂 but will try.
---
### Author:  [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [10월 19, 2017, 7:37오전 UTC](https://meta.discourse.org/t/how-to-make-category-selector-sideways-via-css/72363/14 "2017-10-19T07:37:57Z")
Now i can make it work follow as me want. 😃
