Navigation panel Styles

Please open only in bigger screen to study practice and tweaks, coz layout wont hold good in mobile
Also Note that some of the default styles to the overall structure is from Bootstrap CSS

Navigation Panel using Bootstrap

<div class="btn-group btn-group-lg btn-group-justified">
          <a href="#" class="btn btn-success">Home</a>
          <a href="#" class="btn btn-success btn-md">Interests</a>
          <a href="#" class="btn btn-success">Projects</a>
          <a href="#" class="btn btn-success">Blog</a>
          <a href="#" class="btn btn-success">Contact Me</a>
      </div>

Home Interests Projects Blog Contact Me

Navigation Panel using ul li{display:inline;}

        ul{
          background: #b7a3a1;
        }
        ul li{
          display:inline;
          border: 3px solid #4c4c4c;
          padding:5px 20px;
        }

Navigation Panel using ul li{display:inline-block;}

        ul{
          background: #a7b3a1;
        }
        ul li{
          display:inline-block;
          border: 3px solid #4c4c4c;
          padding:5px 20px;
        }

Navigation Panel using ul li{display:block; float:left;}

        ul{
          background-color:#c1bcdc;
        }
        ul li{
          display:block;
          float:left;
          background: #caacbc;
          padding:5px 20px;
          margin-right: 20px;
        }

Navigation Panel using ul li{display:block; float:right;}

Needless to say, this float disaster

        ul{
          background: #caacbc;
        }
        ul li{
          display:block;
          float:right;
          background: #caacbc;
          padding:5px 20px;
          margin-left:20px;
        }

Navigation Panel using table rows <tr> and cols <td>

        table{
          background-color:#c1bcdc;
          border-collapse: separate;
          border-spacing: 15px;
        }
        table td{
          background-color:#bcc7dc;
          font-size:1.3em;
          padding:5px 20px;
          border:3px solid #673f67;
        }

Navigation Panel using ul{display:inline-table;}

        ul{
          display:inline-table;

        }
        ul li{
          border-bottom:3px solid #5a6c3d;
          border-left:3px solid #5a6c3d;
          padding:5px 20px;
        }

Navigation Panel using ul{display:run-in;}

"run-in" displays an element as block or inline based on context, so we can see that it is same as the below ul li html element without any explicit display styles on <ul> & <li>

          ul{
            display:run-in;
          }
          ul li{
            padding:5px 20px;
            border-bottom:3px solid #5a6c3d;
            border-left:3px solid #5a6c3d;
          }

Navigation Panel without any explicit {display:} styles just plain <ul>

        ul{
        }
        ul li{
          padding:5px 20px;
          border-bottom:3px solid #5a6c3d;
          border-left:3px solid #5a6c3d;
        }

Navigation Panel using ul{display:flex} & li{flex: 0 1 150px;}

        ul{
          display:flex;
          flex-flow:row wrap;
          justify-content:space-between;
          background-color:#ceadea;
        }
        ul li{
          flex: 0 1 150px;
          border:3px solid #5a6c3d;
          padding:5px 20px;
          background-color:#decdea;
        }

Navigation Panel using ul{display:flex} & li{flex: 0 1 auto;}

        ul{
          display:flex;
          flex-flow:row wrap;
          justify-content:space-between;
          background-color:#ceadea;
        }
        ul li{
          flex: 0 1 auto;
          border:3px solid #5a6c3d;
          padding:5px 20px;
          background-color:#decdea;
        }

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

        ul{
          display:flex;
          flex-flow:row wrap;
          justify-content:space-between;
          background-color:#ceadea;
          padding:10px 10px;
        }
        ul li{
          flex: 0 1 auto;
          border:3px solid #5a6c3d;
          padding:5px 20px;
          background-color:#decdea;
        }

Navigation Panel using ul{display:flex}, li{flex: 0 1 auto;} and li:first-child{margin:auto}

        ul{
          display:flex;
          flex-flow:row wrap;
          justify-content:space-between;
          background-color:#ceadea;
        }
        ul li{
          flex: 0 1 auto;
          border:3px solid #5a6c3d;
          padding:5px 20px;
          background-color:#decdea;
        }
        ul li:first-child{
          margin:auto;
        }

Navigation Panel using ul{display:flex}, li{flex: 0 1 auto;} and li:last-child{margin-left:auto}

        ul{
          display:flex;
          flex-flow:row wrap;
          justify-content:space-between;
          background-color:#ceadea;
          padding:0 0;
        }
        ul li{
          flex: 0 1 auto;
          border:3px solid #5a6c3d;
          padding:5px 20px;
          background-color:#decdea;
        }
        ul li:last-child{
          margin-left:auto;
        }

Navigation Panel using ul{display:flex, flex-direction:column} & li{flex: 0 1 auto;}

NOTE:Flex gets really confusing when you try flex property "flex-direction" as column|col-reverse, specially in align & justify contents.
Also Note that if you have used margin on flex items then justify-content no longer works for flex items as in above 2 examples.

          ul{
            width:140px;
            display:flex;
            align-content:center;
            flex-flow:column nowrap;
            background-color:#ceadea;
            padding:0 0;
          }
          ul li{
            flex: 0 1 auto;
            justify-content: space-around;
            border:3px solid #5a6c3d;
            padding:5px 20px;
            background-color:#decdea;
          }

Navigation Panel using ul{display:grid}

NOTE:A very powerful and simplified layout technique

        ul{
          display:grid;
          grid-template-columns: repeat(9, 1fr);
          grid-template:"hom int . . proj .  . blog contact";
          justify-items:center;
          background-color: #dacfaf;
          padding:5px 5px;
          border:1px solid #3a1c2b;
        }
        ul li{
          border:3px solid #3d6a5e;
          padding:5px 10px;
          margin:0 10px;
          background-color: #cfdaaf;
        }
        ul li:nth-child(1){
          grid-area:hom;
        }
        ul li:nth-child(2){
          grid-area:int;
        }
        ul li:nth-child(3){
          grid-area:proj;
        }
        ul li:nth-child(4){
          grid-area:blog;
        }
        ul li:nth-child(5){
          grid-area:contact;
        }

Navigation Panel using bootstrap "glyphicons"

        <div class="btn-group btn-group-justified">
          <a href="#" class="btn btn-info btn-md" title="Home"><span class="glyphicon glyphicon-home"></span></a>
          <a href="#" class="btn btn-info btn-md" title="Interests"><span class="glyphicon glyphicon-heart"></span></a>
          <a href="#" class="btn btn-info btn-md" title="Projects"><span class="glyphicon glyphicon-briefcase"></span></a>
          <a href="#" class="btn btn-info btn-md" title="Blog"><span class="glyphicon glyphicon-user"></span></a>
          <a href="#" class="btn btn-info btn-md" title="Contact Me"><span class="glyphicon glyphicon-envelope"></span></a>
        </div>

Creative navs with flex and transitions

        ul{
          display:flex;
          flex-flow:row no-wrap;

          border-bottom: 5px solid grey;
          border-top: 5px solid grey;
          padding: 0;
          list-style: none;
          background-color: #e8e8e9;
        }
        li {
          background-color: #cacaca;
          margin: 8px;
          padding: 4px;
          border-radius:20px;
          text-decoration:none;
          flex:0 1 auto;
          transition: 0.5s;/*background-color 0.6s, color ease-in-out 0.8s, transform 0.6s;
          transition-timing-function: cubic-bezier(10,5,2,1);*/
         }
         li:hover{
           background-color:#4a4a4a;
         }
         li a:hover{
           color:#cacaca;
           list-style-type: none;
         }
         li:nth-child(odd):hover{
             transform:rotate(7deg);
         }

         li:nth-child(even):hover{
             transform:rotate(-7deg);
         }
         li:nth-child(1){
           margin-right:auto;
         }

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

Please open only in bigger screen to study practice and tweaks, coz layout wont hold good in mobile Also Note that some of the default styles to the overall structure is from Bootstrap CSS

Navigation Panel using Bootstrap

Navigation Panel using ul li{display:inline;}

Navigation Panel using ul li{display:inline-block;}

Navigation Panel using ul li{display:block; float:left;}

Navigation Panel using ul li{display:block; float:right;}

Navigation Panel using table rows <tr> and cols <td>

Navigation Panel using ul{display:inline-table;}

Navigation Panel using ul{display:run-in;}

Navigation Panel without any explicit {display:} styles just plain <ul>

Navigation Panel using ul{display:flex} & li{flex: 0 1 150px;}

Navigation Panel using ul{display:flex} & li{flex: 0 1 auto;}

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

Navigation Panel using ul{display:flex}, li{flex: 0 1 auto;} and li:first-child{margin:auto}

Navigation Panel using ul{display:flex}, li{flex: 0 1 auto;} and li:last-child{margin-left:auto}

Navigation Panel using ul{display:flex, flex-direction:column} & li{flex: 0 1 auto;}

Navigation Panel using ul{display:grid}

Navigation Panel using bootstrap "glyphicons"

Creative navs with flex and transitions

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

Navigation Panel using ul{display:flex, padding:10px 10px} & li{flex: 0 1 auto;}

Please open only in bigger screen to study practice and tweaks, coz layout wont hold good in mobile
Also Note that some of the default styles to the overall structure is from Bootstrap CSS

NAV_PANELS_FOR_CSS_LOVERS