-1

I'm using the skeleton grids and have vertically aligned my two columns using flexbox. However, this pushed my navigation closer to the logo image, and won't move to the right even using text-align or align.

The HTML:

<nav class="nav">
    <div class="row">
        <div class="one-third column">
            <img class="brand" src="img/logo.png" alt="Logo" />
        </div>
        <div class="two-thirds column" align="right">
            <span class="bars"><i class="material-icons">menu</i></span>
            <ul>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
                <li><a href="#">LOL</a></li>
            </ul>
        </div>
    </div>
</nav>

The SCSS:

nav.nav {
    display: flex;
    align-items: center;

    .brand {
        width: 200px;
    }

    ul {
        width: 100%;
        margin: 20px;
        list-style: none;
        text-align: right;

        li {
            display: inline-block;
            margin: 0;

            a {
                display: block;
                text-decoration: none;
                color: inherit;
                text-transform: uppercase;
                letter-spacing: 2px;
                padding: 12px 16px;
                border-bottom: 2px solid lighten($foreground-colour, 30);;
                margin-right: -5px;
            }
            a:hover {
                color: lighten($foreground-colour, 30);
                border-bottom-color: red;
            }
        }
    }

    .bars {
        display: none;
    }
}

The image of the result I have now is this (logo scribbled out):

enter image description here

madcrazydrumma
  • 1,847
  • 3
  • 20
  • 38

1 Answers1

1

That's probably because you use the flex display on the nav, which contains only the row in which the logo and menu are. By default using a flex display without defining the flex property in the child, will result in flex: 0 1 auto for the child. This cuts the width of the child back to the combined width of its children(which are the logo and the menu), which is why they end up so close to each other.

So, in order to fix this, you either want to use the flex display in the row div, and then specify widths with the flexbox properties, removing the skeleton-css classes (they don't work well together).

Or, you could work with skeleton-css and play with line-heights and vertical-align properties in the row div. It's useful to temporarily give your divs and other elements a different color, so you can see what happens.

Evelijn
  • 371
  • 2
  • 10