1

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?

Perry J
  • 355
  • 3
  • 16

3 Answers3

2

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.

fstanis
  • 5,234
  • 1
  • 23
  • 42
  • Thank you. Yes, something like this is what has been circulating in my mind for a while, will try also this and tell you how it goes. – Perry J May 29 '17 at 12:03
  • In order for this approach to work, I believe I will have to ensure that I have the whole screen width to play with. You see, I am also working in a PHP framework (Yii2), that by default always seems to put all content within a horisontally centered area of the screen, with broad empty margins at left and at the right. I do not want that, but I don't either know how to change it. So for the time being I am using some brute force with my menus, like `position:fixed, left:12px`. That puts my menus at the far left, as I want it. But I suspect the grid approach will keep inside the area? – Perry J May 29 '17 at 13:23
  • The grid will just grow to the size of the parent - you can just keep the menus alone in the grid, give them `eight wide column` each to make them equal width and then position and size the grid as you wish. However, Semantic UI supports [fixed menus](https://semantic-ui.com/collections/menu.html#fixed), so why not just use that? – fstanis May 29 '17 at 22:43
  • Thank you very much. Yes, the grid takes the size of its parent. If I can do with the centered area (viewport?) the framework gives me, this is working perfectly, with the width and so on, when the viewport becomes the parent. But I need the menu (and the grid as well) to be outside of the viewport. This needs some more work but it is possible. Will check the fixed menu too! However - with your help - I know how to go on with this. I will mark this question answered now. – Perry J May 30 '17 at 06:37
0

Try adding !important in your css codes.

Vandolph Reyes
  • 622
  • 6
  • 18
  • Thank you Vandolph! Will give it a try! – Perry J May 29 '17 at 11:49
  • I think use of `!important` becomes more and more difficult to maintain overtime. Better to use more specific styles for overrides which don't depend on precedence. https://stackoverflow.com/a/3427813/861010 – ChatGPT Sep 20 '17 at 04:30
-1

Try to re-arrange your css links.

Paul Reggie Valenzuela
  • 17
  • 3
  • Thanks. I am using CDN linkage in the head section of he page, strictly after the school book – Perry J May 29 '17 at 12:05
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. https://stackoverflow.com/review/low-quality-posts/17386190 – ChatGPT Nov 08 '17 at 08:06