Could I get some CSS help on my forum?

AI-generated summary

Alignment Issue with Categories Tab

rodypl is experiencing a design issue with their Discourse forum, where the Categories tab is out of alignment with other tabs. They provided images of the current and previous design.

Simsnet provided a solution by modifying the CSS code for .category-breadcrumb to adjust the vertical alignment. The original code had margin-top: -0.4em, which was changed to margin-top: 1em.

Additionally, Simsnet suggested modifying the #main-outlet code to fix the padding in the top bar. The original code had padding-top: 2.5em, which was changed to padding-top: 1em.

rodypl confirmed that the solution worked, and Simsnet was glad to have helped. They also shared a personal connection to ActionVFX, having used it in their high school film class.

Hey everyone! I’ve ran into another random “design break” on my forum. Pretty much, my Categories tab is out of alignment with the other tabs at the top of my forum. You can see here:

It used to look like this a few weeks ago:

Now I still don’t understand why Discourse won’t leave my design alone (this is my 4th or 5th time I’m having to “fix” my design because it randomly broke), but if someone could help me figure out what code I need to paste in to fix this alignment issue, that would be appreciated!

You can find my forum here.

Current:

.category-breadcrumb {
  margin-top: -0.4em; // vertical alignment
}

image


New:

.category-breadcrumb {
  margin-top: 1em; // vertical alignment
}

Also to fix the padding in your top bar:

Current:

#main-outlet {
  padding-top: 2.5em;
}


New:

#main-outlet {
  padding-top: 1em;
}

Thank you so much! That did it!

Glad to help :blush:, make sure to mark the reply as solved.

Also we used to use ActionVFX in my high school film class!

No way! That’s awesome. It’s always a weird feeling that people know who we are!