How to make category selector sideways via css

Development

AI-generated summary

Category Selector Sideways via CSS

Bank_Live asked for help in making a category selector sideways via CSS, similar to the one on http://tidbits.io. Stephen provided a starting point for the CSS styles, which included rotating, repositioning, and offsetting the category selector.

Bank_Live asked how to implement these styles in the customize > themes > Edit CSS section. HAWK provided the location to add the CSS code.

However, Bank_Live encountered issues with the code not working. Stephen asked for clarification on the implementation and suggested checking the site’s live status.

After Bank_Live shared a screenshot of their implementation, Stephen pointed out a missing bracket {}. Bank_Live then encountered a CSS error, which Stephen helped resolve by formatting the code correctly.

Finally, Bank_Live was able to implement the sideways category selector successfully.

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.

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.

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?

8

ee2
ee21387×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.

11

ee3
ee31459×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.

13

No work. :joy: but will try.

14

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

ee4
ee41389×673 150 KB