Semantic UI centered non-fluid menu?

html css semantic-ui
Nathan McCallum picture Nathan McCallum · Apr 25, 2015 · Viewed 13.8k times · Source

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.

Answer

MTran picture MTran · May 14, 2015

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/

Related questions

Semantic UI centre aligned login box?

I am using the Semantic UI framework for my website. I want to place the login box in the centre of the page.I want only the login box in the page. I don't understand how to centre aligned using …

Read More
Vertical alignment of a div using Semantic-UI

I can't seem to find it anywhere in the docs. Is there a way to vertically center a div on the page using Semantic-UI semantics :) Here is what I'm trying to do: <div class="ui centered grid"> <…

Read More
Semantic UI footer at the end

I'm using Semantic-UI in my project. I created an index page, everything works ok with the elements (navbar, footer, etc). Now Im dev a signup page but footer does not goes to the end of the page, what can I …

Read More