2

I have a header with 3 elements at full size layout (12 column grid):

left= logo (3 columns), middle= nav (6 columns), right= social media (3 columns)

At a smaller size (4 column grid) I've set "social media" to display none, "logo" and "nav" are both two column. They are not horizontally aligned the second element displays under the first both spanning two columns but not next to each other. I've tried floating, clearing and all that jazz but no joy.

Here is the HTML:

<header>

<div class="header">

    <a href="<!-- @path index.html/#page1 -->" id="logo">∆0Ω</a>

    <nav>
        <ul>
            <li class="nav-item"> <a href="<!-- @path index.html/#page1 -->">What?</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">How?</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">Work</a></li>
            <li class="nav-item"> <a href="<!-- @path // -->">Few!</a></li>
            <li class="nav-item hide"> <a href="//">Twitter</a></li>
            <li class="nav-item hide"> <a href="//">Facebook</a></li>
            <li class="nav-item hide"> <a href="//">LinkedIn</a></li>
        </ul>
    </nav>

    <div id="social">
        <ul>
            <li><a href="http://">t</a></li>
            <li><a href="http://">f</a></li>
            <li><a href="http://">in</a></li>
        </ul>
    </div>


</header>

Here is the scss:

header{


    background: tint(black, 70%);
    position: relative;
    width: 100%;
    top: 0;
    z-index:+100;


    @include large {
        position: fixed;
        height: 6.666666666666667%;
    }

}


.header {

        top: 0;
        height: 100%;
        @include outer-container;
        background: tint(black, 85%);
        text-align: center;
        z-index: +100;

    }


#logo {
    text-align: left;
    @include span-columns(2);

        @include large {
            @include span-columns(3);
          }

}

nav {
    @include span-columns(2);
    text-align: right;

        @include large {
            @include span-columns(6);
            text-align: center;

                    li {
                        display: inline-block;
                    }

                    .hide{
                        display: none;
                    }
          }
}


#social {

    display:none;

    @include large {
        @include span-columns(3);
        text-align: right;

            li {
                display: inline-block;
                }
         }

}

Any help with this would be great.

Many thanks in advance, Alex

4

1 回答 1

1

为了解决这个问题，我使用了 omega() 包含方法，将其添加到 nav 元素中以获得较小的屏幕：

nav {
    @include span-columns(2);
    @include omega();
    text-align: right;

        @include large {
            @include span-columns(6);
            text-align: center;

                    li {
                        display: inline-block;
                    }

                    .hide{
                        display: none;
                    }
          }
}

现在我的徽标和导航在较小的屏幕尺寸下水平对齐。

于 2013-09-01T09:49:27.290 回答