Robert Strauch
Robert Strauch

Reputation: 12896

Color not applied to menu in Semantic UI

I'm creating a menu using Semantic UI. This menu shall have a colored background and text items. For testing purposes I added the green class:

<body>
  <div class="ui stackable green text menu">
    <div class="header item">Site Title</div>
    <div class="ui right text menu">
      <a class="item">Item 1</a>
      <a class="item">Item 2</a>
      <a class="item">Item 3</a>
    </div>
  </div>
</body>

The menu and its items are shown but there is no green color applied.

Here's a demo on codepen.io.

Upvotes: 2

Views: 2103

Answers (1)

Alexander Tyapkov
Alexander Tyapkov

Reputation: 5017

It is not obvious but you need to add "inverted" class for color to be applied:

<body>
  <div class="ui stackable green inverted menu">
    <div class="header item">Site Title</div>
    <div class="ui right text menu">
      <a class="item">Item 1</a>
      <a class="item">Item 2</a>
      <a class="item">Item 3</a>
    </div>
  </div>
</body>

Upvotes: 8

Related Questions