Semantic UI centered non-fluid menu?

Question

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.

Soult

Answer 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/

Linnea

This also seems to fail when you make the menu fixed – Tasman

Answer 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/

Omalley

This seems to fail when using fixed class on the menu – Tasman

Answer 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;
}

Clothesbasket

Answer 4

I have searched on the semantic forums and other places; created mine.. Hope works for you too.

   <div class="ui center aligned container">
    <div class="ui" style="background-color: #009999;">
      <!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
        <div class="ui centered small image" >
            <a href="#">
            <img class="logo" src="./logo_white.png">
            </a>
        </div>
    <!-- </a> -->
    </div>
</div>

Whitesmith