Semantic UI centered non-fluid menu?
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;
}
Related videos on Youtube
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, 2022Comments
-
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 over 7 yearsThis seems to fail when using
fixed
class on the menu -
rubie over 7 yearsThis also seems to fail when you make the menu
fixed