How create left navbar with icons

Question

I'm training my bad css skills and I can't figure out how create a left navbar (see the image below).

Note: I already have a top navbar... And in the middle of both will exist the content of page.

<aside>
    <div class="navbar navbar-fixed-left">
        <ul class="nav navbar-nav">
            <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
                </a>
            </li>
        </ul>
    </div>
</aside>

And my css:

                        .navbar-fixed-left {
                      width: 180px;
                      position: fixed;
                      border-radius: 0;
                      height: 100%;
                      background-color: #F0F0F0;
                      border-right: 1px solid #bdc3c7;
                    }

                    .navbar-fixed-left .navbar-nav > li {
                      float: none; 
                      width: 178px;
                    }

                    .navbar-fixed-left + .container {
                      padding-left: 160px;
                    }

                    .navbar-fixed-left .navbar-nav > li > .dropdown-menu {
                      margin-top: -50px;
                      margin-left: 140px;
                    }


                    aside {
                        margin-top: 55px;
                    }

Saurav Rastogi · Accepted Answer · 2016-12-26 15:55:59Z

You can try CSS Flexbox. Make your ul li a element a flex container & wrap your text inside a wrapper (in my case .text). And apply the following properties:

ul li a {
  display: flex;
  text-decoration: none;
}

Have a look at the snippet below:

body {
  margin: 0;
}

.navbar-fixed-left {
  width: 180px;
  position: fixed;
  border-radius: 0;
  height: 100%;
  background-color: #F0F0F0;
  border-right: 1px solid #bdc3c7;
}

.navbar-fixed-left + .container {
  padding-left: 160px;
}

.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}


aside {
    margin-top: 55px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li a {
  display: flex;
  text-decoration: none;
}

ul li a:hover {
  background: #E0E1E6;
}

ul li a i {
  padding: 10px;
  border-right: 1px solid #bdc3c7;
}

ul li a .text {
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<aside>
    <div class="navbar navbar-fixed-left">
        <ul class="nav navbar-nav">
            <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
                </a>
            </li>
        </ul>
    </div>
</aside>

Hope this helps!

K.Suthagar · Accepted Answer · 2016-12-26 15:58:40Z

Try this following code,

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Menu</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    </head>
    <body class="no-skin">
            <div id="sidebar" class="sidebar responsive ace-save-state">
                <ul class="nav nav-list">
                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text"> Applications </span>
                            <b class="arrow fa fa-angle-down"></b>
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text"> Applications </span>
                            <b class="arrow fa fa-angle-down"></b>
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul><!-- /.nav-list -->
            </div>
    </body>
</html>

To get the related CSS files, Click Here https://github.com/suthagar23/AdmissionSystem/tree/master/public

Syden · Accepted Answer · 2016-12-27 12:37:55Z

EDIT: I think the issue is snippet output's viewport is smaller and eats some styles, you will have to tweak values through @media querys if you wish to preserve responsiveness with the code you provided:

Full resizable JSFiddle here (a few CSS were changed vs the snippet below, to make it look ok on bigger viewport)

Big viewport:

Smaller viewport:

Isolate icons from text menu by wrapping text on <span>. Make lis relative and icons absolute and adjust values as desired:

.navbar-fixed-left {
  width: 180px;
  position: fixed;
  border-radius: 0;
  height: 100%;
  background-color: #F0F0F0;
  border-right: 1px solid #bdc3c7;
}
ul.nav.navbar-nav {
  margin-top: 0;
}
.navbar-fixed-left .navbar-nav li {
  float: none;
  width: 194px;
  border-top: 1px solid #bdc3c7;
  position: relative;
  border-right: 1px solid lightgray;
}
li:nth-child(3) {
  border-bottom: 1px solid #bdc3c7;
}
.navbar-fixed-left .navbar-nav li a:hover {
  background-color: gainsboro;
}
.navbar-fixed-left + .container {
  padding-left: 160px;
}
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}
span {
  margin-left: 60px;
  color: gray;
}
aside {
  margin-top: 55px;
}
i.fa {
  border-right: 1px solid #bdc3c7;
  padding: 10px 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  line-height: 20px;
}
.color1 {
  border-left: 3px solid red;
  margin-left: -1px;
}
.color2 {
  border-left: 3px solid blue;
  margin-left: -1px;
}
.color3 {
  border-left: 3px solid green;
  margin-left: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<aside>
  <div class="navbar navbar-fixed-left">
    <ul class="nav navbar-nav">
      <li>
        <a href="#">
          <i class="fa fa-plus color1" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-plus color2" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-plus color3" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

Your code did not work for me. Check the image: 1.1m.yt/c2VIubF.jpg

Collectives™ on Stack Overflow

How create left navbar with icons

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related