CODEWITHSUNDEEP
javascriptcsssemantic-ui
Perry J
Perry J

Reputation: 365

Semantic UI and basic CSS styling

I'm having problems applying some very rudimentary CSS on a Semantic UI menu. In my case I have two vertical menus, along the left margin, and obviously I need them both to have the same width, or it would look just crazy. But, hmmm... here some unexpected trouble starts. I tried out something like this:

<div class="ui labeled compact vertical icon menu" style="width: 250px;">

That doesn't work. Then I looked at the css file I include from https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css

..and tried to override some CSS at my page like this:

.ui.menu {
 width: 250px;
}

But that does not work, either. However, a closer study of the huge CSS file after the part:

/*******************************
     Theme Overrides
*******************************/
/*******************************
     Site Overrides
*******************************/
/*
 * # Semantic - Menu
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributor
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
         Standard
*******************************/

/*--------------
  Menu
---------------*/

.ui.menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 1rem 0em;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-weight: normal;
border: 1px solid rgba(34, 36, 38, 0.15);
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
border-radius: 0.28571429rem;
min-height: 2.85714286em;
}

...indicates that "width" is not an overridable property. So, how to set the width? Seemingly, I can just choose different menu sizes like "mini menu", "small menu"..."massive menu", absolutely useless to me. Any ideas?

Upvotes: 1

Views: 432

Answers (3)

Paul Reggie Valenzuela
Paul Reggie Valenzuela

Reputation: 17

Try to re-arrange your css links.

Upvotes: -1

Vandolph Reyes
Vandolph Reyes

Reputation: 620

Try adding !important in your css codes.

Upvotes: 0

fstanis
fstanis

Reputation: 5534

Avoid specifying an absolute size for an element - the correct way to do this is to use a grid along with the fluid property of a menu which makes it use the full width of the parent (in this case, the grid column).

<div class="ui grid">
  <div class="two wide column">
     <div class="ui labeled compact vertical fluid icon menu">
       <!-- your first menu -->
     </div>
  </div>
  <div class="two wide column">
     <div class="ui labeled compact vertical fluid icon menu">
       <!-- your second menu -->
     </div>
  </div>
  <div class="twelve wide column">
    <!-- your content here -->
  </div>
</div>

Of course, adjust the column widths as you want.

Upvotes: 2

Related Questions