Qfyilyi

I have a navigation ul on the left side and logo in the middle and another ul in the right side like so :

Home    Works    Podcast                  Logo                 Journal    About    Contact 

on hover there is a drop down menu on works and about, i wanna do two things now :

1 - on mobile version i want to change the navigation to menu icon like so

Logo                                                                     Menu

2 - On menu click it should open the new menu for mobile but how to make the drop down work in mobile since there is no hover on mobile
and how to make the navigation be vertically since i have ul on the left and ul in right and logo in the middle this i want it be like so

Home

Works

Podcast

Journal

About

Contact

here is a code pen, and sorry i know i am asking for more :

https://codepen.io/anon/pen/jQzYye

Here I am answering you logo / menu positioning and order on mobile and desktop using just one menu instead of two and putting the logo in as the first list item. Please see comments throughout the code.

html:

<header id="header">

        <nav class="site-navigation">

            <ul>

        <!-- move logo into li at start of list, ditch the div: -->

        <li class="logo"><h1>Humane</h1></li>

                <li class="left-menu-item active"><a href="">Home</a></li>

                <li class="left-menu-item"><a href="">Works</a>

                    <ul>

                        <li><a href="">Metro</a></li>

                        <li><a href="">Text</a></li>

                        <li><a href="">Columns</a></li>

                        <li><a href="">Full Width</a></li>

                        <li><a href="">Box</a></li>

                    </ul>

                </li>

                <li class="left-menu-item"><a href="">Podcast</a></li>

                <li class="right-menu-item"><a href="">Journal</a></li>

                <li class="right-menu-item"><a href="">About</a>

                    <ul>

                        <li><a href="">Agency</a></li>

                        <li><a href="">Freelancer</a></li>

                    </ul>

                </li>

                <li class="right-menu-item"><a href="">Contact</a></li>

            </ul>

        </nav>

    </header>

css:

body {

  max-width: 1600px;

  margin: 0 auto;

}

#header {

    padding: 120px 0;

}



.site-navigation ul {

    list-style: none;

    padding: 0;

}



.site-navigation ul li a {

    color: #A3A3A3;

    text-decoration: none;

    display: block;

}

.site-navigation ul li a:hover {

    font-weight: bold;

    color: black;

}

.site-navigation ul li a::after {

    content: '';

    display: block;

    width: 0;

    height: 1px;

    background: #39393B;

    transition: width .3s;

}

.site-navigation ul li a:hover::after {

    width: 100%;

    transition: width .3s;

}



.site-navigation ul li ul  {

    position: absolute;

    visibility: hidden; /* hides sub-menu */

    opacity: 0;

    z-index: -1;

    -webkit-transition: all 0.4s;

    -o-transition: all 0.4s;

    transition: all 0.4s;

}

.site-navigation ul li ul li {

    padding: 20px 0;

}

.site-navigation ul li:hover ul  {

    visibility: visible; /* shows sub-menu */

    opacity: 1;

    z-index: 1;

}

.active {

    border-bottom: 1px solid #39393B;

}



@media only screen and (max-width : 1019px) {



}





@media only screen and (min-width : 1020px) {

  /* add ul so flex is on ul and move into desktop only media query */

  .site-navigation ul { 

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;

}

   /* move into desktop only media query */

  .site-navigation ul li { 

    display: inline-block;

}

 /* move into desktop only media query */

.site-navigation ul li:not(:first-child) {

    margin-left: 2em;

}

  /* add flex order in your media query for desktop only */

.site-navigation ul li.left-menu-item {

    order:1; /* add this */

}

/* add flex order in your media query for desktop only */

.site-navigation ul li.logo {

    order:2; /* add this */

}

/* add flex order in your media query for desktop only */

.site-navigation ul li.right-menu-item {

    order:3; /* add this */

}

}

link: https://codepen.io/carolmckayau/pen/zMWWXX