Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aris Constantinou
Aris Constantinou
2,687 Points

How can i make my flexbox navigation appear vertically?

I am trying to get my navigation (logo and links) to appear vertically on the left and also my links to have separation from the logo and be on the bottom left only. Is it possible to be done with flexbox ?

Codepen

<html>
<head>
  <link rel="stylesheet" href="../FinalProject/css/style.css">
</head>
<body>


    <header class="main-header">
        <img class="logo"src="http://www.impexsolutions.org/images/world-icon.png">
        <ul class="flex-nav">
                    <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
        <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
       <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
        <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
       <li><a href="index.html"><span><img src="http://icons.iconseeker.com/png/fullsize/summer-collection/web-1.png"></span></a></li>
        </ul>
      </header>

    <div class="primary">
      <h1></h1>
      <p></p>
      <p></p>
    </div>

    <div class="secondary">
      <h1></h1>
      <p></p>
      <p></p>
    </div>

</body>
</html>

Style.css

/*GLOBAL STYLES*/

*{padding: 0;margin: 0;box-sizing: border-box;}
ul{list-style: none;}
a{text-decoration: none;}

/*FLEX*/

.container{}
.primary{}
.secondary{}
.flex-nav{}
.flex-nav li{}
.flex-nav a{}
.flex-nav span{}

/*STYLES*/

body{background-color: #a7a7a7;}

/*IMAGE STYLE*/

.main-header,
.flex-nav {
    display: flex;
    flex-direction: row;
    }
.main-header {
    align-items:center;
    flex-direction: row;
    justify-content: space-between;}
.logo{max-width: 100px;max-height:100px;}
.flex-nav img{width:50px;}

2 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points

Hi there,

The answer above may give the results you want I am not familiar with that method.

However with flexbox the easiest way to change the orientation of the flex box is to change the flex-direction property.

This can be achieved by altering your CSS slightly like so.

.main-header,
.flex-nav {
    display: flex;
    flex-direction: column;       <-------this amendment should give you the result your after
    }

Hope that helps.

Happy coding!

Aris Constantinou
Aris Constantinou
2,687 Points

Thank you, it worked :)

Ran ShemTov
Ran ShemTov
14,148 Points
Ran ShemTov
Ran ShemTov
14,148 Points

try putting

flex-wrap: wrap;

on the container of these elements.

Also you can try turning them into blocks, instad of inline/inline-block.

block element spans the entire width of it's paret element, making the other elements, go underneath it.