Semantic UI centered non-fluid menu?

14,993

Solution 1

Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment. So for example:

<div class="ui centered grid">
    <div class="center aligned column">
        <div class="ui compact menu">
          <a class="active item">
            <i class="home icon"></i> Home
          </a>
          <a class="item">
            <i class="mail icon"></i> Messages
          </a>
        </div>        
    </div>
</div>

JSFiddle Link: http://jsfiddle.net/pLskpufp/2/

Solution 2

You can also just use a center aligned container:

<div class="ui center aligned container">
    <div class="ui compact menu">
        <a class="active item">
            <i class="home icon"></i> Home
        </a>
        <a class="item">
            <i class="mail icon"></i> Messages
        </a>
    </div>        
</div>

JSFiddle Link: http://jsfiddle.net/377v6ect/1/

Solution 3

I know it's not a pure Semantic UI solution, but for those of you looking for a way to do this with a fixed menu in Semantic UI, the best solution I've found so far is to wrap it in a div with a little custom CSS.

<div className="fixed bottom">
  <div className="ui centered grid">
    <div className="center aligned column">
        <!-- Your Semantic UI menu here, but not fixed. -->
    </div>
  </div>
</div>

Along with this css...

div.fixed {
  width: 100%;
  position: fixed;
}
div.fixed.bottom {
  bottom: 0;
}
div.fixed.top {
  top: 0;
}
Share:
14,993

Related videos on Youtube

Nathan McCallum
Author by

Nathan McCallum

I love creatively solving problems with technology. I have experience in Node.js, React, and Ruby on Rails. Please contact me if you are looking for an industry-standard web or mobile app for your business!

Updated on August 11, 2022

Comments

  • Nathan McCallum
    Nathan McCallum over 1 year

    I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).

    I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?

    Any help would be greatly appreciated.

  • rubie
    rubie over 7 years
    This seems to fail when using fixed class on the menu
  • rubie
    rubie over 7 years
    This also seems to fail when you make the menu fixed