Adding custom icons to the menu with CSS

 

Our Navigation Menu allows for custom links and pages to be added. We offer menu icons for these items are available in Menu Configuration. You may have a preferred icon to use for your menu items; in this case, use CSS to add custom icons to your menu.

Add Custom Icons to Navigation Menu

  1. Upload regular state icons in Assets.
  2. Upload hover/active state icons in Assets.
  3. Go to Stylesheet in Design.
  4. Overwrite the default icons with the icons uploaded in Assets.
         .navigation-container .main-navigation svg {
        background-position: center center;
        background-size: contain;
        fill: transparent !important;
        height: 36px;
        margin-right: 16px;
        width: 36px;
    }
    
    .navigation-container .main-nav-home svg {
        background-image: url(https://cmnty/uploads/custom_style/menu_startseite.svg);
     } 
    
    .navigation-container .main-nav-home.active svg, .navigation-container .main-nav-home:hover svg {
        background-image: url(https://cmnty/uploads/custom_style/menu_startseite_active.svg); 
    }
    
  5. Be sure to use the accurate URL to your assets.
  6. Review the icon changes in effect.
  7. Repeat process for all menu items for which you would like a custom icon.

Read more about building an online community following the why, how and what.

How to create custom CSS for your CMNTY platform.

Was this article helpful?

Related Articles