0

I am having a problem vertically centering my navigation within the skeleton CSS framework, I have tried other suggestions from all over the Internet but to no avail.

I did manage to get it by adding a margin-top to the top of the ul but it was leaving a big white space underneath the navigation which was pushing page elements underneath it down.

<header class="mainNav">
    <div class="container">
        <div class="row">
            <div class="four columns"><img class="logo" src="img/redonelogo.png"></div>
            <nav>
                <div class="six columns">
                    <ul>
                        <li><a href="#">about</a></li>
                        <li><a href="#">contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>

CSS:

.mainNav {
    padding: 1%;
    border-bottom: 1px solid #ccc;
    text-align: center;
    margin: 0;
    padding: 0;
}

.mainNav ul {
    list-style-type: none;
}

.mainNav ul li {
    display: inline;
    position: relative;
}

.mainNav ul li a {
    display: inline-block;
}

I have tried adding margin:0 auto; to the ul item and the li item but nothing changed.

Remi Guan
  • 21,506
  • 17
  • 64
  • 87
JWoods
  • 31
  • 5
  • Do you mean centered **despite** the logo because otherwise the menu *is* centered. – Paulie_D Aug 14 '15 at 09:59
  • The logo is in a different set of columns, the logo is also dictating the height of the container class, the problem is that yes it is centered but it isn't centering horizontally inside the six columns. The only way I get it working is by adding a margin-top to it but as I said it adds space under the ul and is pushing the container div down the page. – JWoods Aug 14 '15 at 10:05
  • I think you mean centering **vertically** then. Right? – Paulie_D Aug 14 '15 at 10:08
  • I did yes, thank you for pointing that out. – JWoods Aug 14 '15 at 10:10
  • You should be able to make the `line-height` of the menu the same as the height of logo image...I think that would do it...otheriwse we might have to get really creative and I'm not sure you want that. – Paulie_D Aug 14 '15 at 10:37
  • vertically center of what? Do you want vertically center on the logo? Try to make an image which can make us to understand better. – Ganesh Yadav Aug 14 '15 at 10:53
  • Vertically centered inside the six columns, I will provide an image if needed. I will try @Paulie_D suggestion of line-height first. I don't mind getting creative :). – JWoods Aug 14 '15 at 11:02
  • Other than the previous - http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div – Paulie_D Aug 14 '15 at 11:29

2 Answers2

0

You could set the padding to 0px on your ul

.mainNav {
    padding: 1%;
    border-bottom: 1px solid #ccc;
    text-align: center;
    margin: 0;
    padding: 0;
}

.mainNav ul {
    list-style-type: none;
    padding: 0px;
}

.mainNav ul li {
    display: inline;
    position: relative;
}

.mainNav ul li a {
    display: inline-block;
}
<header class="mainNav">
    <div class="container">
        <div class="row">
            <div class="four columns"><img class="logo" src="http://ubuntu-tweak.com/media/appcenter/logo/test-drive-logo.png"></div>
            <nav>
                <div class="six columns">
                    <ul>
                        <li><a href="#">about</a></li>
                        <li><a href="#">contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>

Hope this helps.

Serge Inácio
  • 1,366
  • 9
  • 22
0

I believe you issue is a result of only using 10 columns (4 + 6) in your row. With Skeleton you need a row to total 12 columns.

Nigel Henbest
  • 1