<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="fixed-top"><!-- use fx attribute for fixed positioning -->

​

        <input type="checkbox" class="toggler">

        <a class="brand" href="./">Logo</a>

        <ul>

            <li><a href="../">首页</a></li>

            <li><a href="./#">商店</a></li>

            <li><a href="./#">购物车</a></li>

            <li><a href="./#">关于</a></li>

            <li>

                <a>用户</a>

                <ul>

                    <li><a href="./#">登录</a></li>

                    <li><a href="./#">注册</a></li>

                    <li><a href="./#">注销</a></li>

                </ul>

            </li>

            <li><a href="./">CSS 指南</a></li>

        </ul>

    <form class="search">

      <input type="search" placeholder="Search">

      <button type="submit">Search</button>

    </form>

​

<i class="fa fa-user-circle" aria-hidden="true"></i>

</nav>

nav, nav ul {

  display: -webkit-flex;

  display: flex;

  align-items: center;

  list-style-type: none;

}

nav .toggler {display:none;}

nav .brand {

    display: inline-block;

    padding-top: .25rem;

    padding-bottom: .25rem;

    margin-right: 1rem;

    font-size: 1.25rem;

    line-height: inherit;

    white-space: nowrap;

}

​

nav li a {

  display: block;

  padding: 15px;

  text-decoration: none;

}

​

nav ul ul {

    -webkit-box-orient: vertical!important;

    -webkit-box-direction: normal!important;

    -webkit-flex-direction: column!important;

    -ms-flex-direction: column!important;

    flex-direction: column!important;

    display: none;

}

​

nav .search {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-flow: row wrap;

    -ms-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

  margin-left: auto;

  margin-bottom: 0;

}

​

nav i {

  margin-left:1rem

}