Centered navbar - is it possible?


#1

Hey guys, pretty new to Semantic-UI, but not new to responsiveness/other responsive frameworks such as Bootstrap, MaterialzeCSS, etc. Currently, I am using the default “Homepage” that is listed in the “Layouts” section of the Semantic website.

Instead of using any of the compilation tools or anything, I simply am using each included component that is copied from the Homepage. “dist/…” etc, without using any themeing - I simply don’t need it. However, I’m running into a problem that is curious to me…because I feel that I understand the simple classes and language, but it’s not quite doing what I expect it to. Here is my navbar with its container:

<div class="ui inverted vertical masthead center aligned segment">

        <div class="ui center aligned container">
            <div class="ui large secondary inverted centered pointing menu">
                <a class="toc item">
                    <i class="sidebar icon"></i>
                </a>
                <a class="active item">Home</a>
                <a class="item">Work</a>
                <a class="item">Company</a>
                <a class="item">Careers</a>
            </div>
        </div>

        <div class="ui text container">
        </div>

    </div>

I have attempted to put “centered” and “center aligned” on the “ui inverted vertical masthead,” the “ui container” (that has “center aligned” on it) and the “large secondary inverted pointing menu.” I’ve done each of those on every single one, on each and only one, and on different combinations, but it will never center the navbar links. Why is this?


#2

NEVERMIND!

I figured it out; using “compact” on the “menu” div will allow you to center the navbar/menu items!