0

I have little problems with positions of my elements. I want to show navigation in right side after logo image but unfortunatly it works not correct. Here below you can see what I have right now. How can I fix it? I tried to use float:right to menu but it didnt help.

enter image description here

HTML markup:

       <header>
            <section class="section section--menu" id="Juno">
                <img id="logo" src="img/logo.png" height="150px" width="150px">

                <nav class="menu menu--juno">
                    <ul class="menu__list">
                        <li class="menu__item menu__item--current"><a href="#" class="menu__link">Home</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">News</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">FAQ</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">Contact us</a></li>
                    </ul>
                </nav>
            </section>
        </header>

CSS:

.menu {
    line-height: 1;
    float: right;
    margin-bottom: 15px;
}
#logo{
    margin-top:15px;
}
.section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.section--menu {
    position: relative;
    overflow: hidden;
}
Nurzhan Nogerbek
  • 4,806
  • 16
  • 87
  • 193
  • You don't want `flex-direction: column` if your content is supposed to be in a row. – Paulie_D Jan 10 '16 at 15:45
  • Take a look at http://stackoverflow.com/questions/34566804/how-to-align-an-image-and-text-vertically-in-the-middle/34566964#34566964 – Nenad Vracar Jan 10 '16 at 15:46

1 Answers1

0

maybe this way:

position:absolute; right: 10%; bottom: 10%;
Surrerstry
  • 21
  • 3