Styling custom menu items

tetricky
March 8, 2023
chat_bubble_outline 2
  • link
    Members 153 posts
    March 8, 2023, 4:54 p.m.
    link

    In Menu items in settings, I can create links. Which is very useful. I would like to highlight one link over the others. It seems that might be possible using the "CSS class:" setting.

    I can't find how to make this do anything.

  • arrow_forward

    Thread has been moved from Feedback.

  • edit

    Thread title has been changed from Menu items.

  • link
    Project Lead
    March 8, 2023, 5:03 p.m.
    link

    Your desktop browser has "inspect element" function that lets you peek at HTML of generated element. I've set nav-item-discord as CSS class on Discord link on this site. When I inspect it's HTML in chrome I see this:

    <li>
  <a href="https://discord.gg/fwvrZgB" class="nav-item-discord" target="_blank">
    Discord
  </a>
</li>

    So I can style it both in navbar and footer with this custom css:

    .nav-item-discord {
  color: #738ADB !important;
}

    Note that !important is required because otherwise stronger selectors from default theme will override custom style.

    If you want to use separate styles for navbar and footer, you will have to use more specific select. For desktop navbar it's .navbar-desktop-nav .nav-item-discord, for footer its .footer-nav .nav-item-discord.

  • link
    Members 153 posts
    March 8, 2023, 5:34 p.m.
    link

    That works perfectly. I love the easy mod/themeable capability of misago. Apologies for the dumb questions.....I'm getting to know my way around.