Photoshop Question posted in
The official user guide can be found here.

How to modify the active highlight in sidenav – Photoshop

I have a sidenav with some menu items, right now I have an active class applied to the current li, it will highlight the li with a background color (in this case: #3596d5).

Instead of highlighting the entire li, I should like just a tiny section (about 10 pixels) to the left of the text to be highlighted, I can’t think of any way to do this.

Here is the photoshopped result that I am looking for:

The style I am looking for

My current HTML:

<nav class="nav-primary">
    <ul class="nav nav-main">
        <li class="active">
            <a class="auto nav-item text-white" href="#">
                <span>Home</span>
            </a> 
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 2</span>
            </a>
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 3</span>
            </a>
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 4</span>
            </a>
        </li>
        <li class="">
            <a class="auto nav-item" href="#">
                <span>Item 4</span>
            </a>
        </li>
    </ul>
</nav>

My current CSS:

.text-white {
    color: white;
}
.nav-primary ul.nav > li > a {
    padding: 15px
}
nav {
    background-color: black;
}
.active {
    background-color: #3596d5;

}

My jsfiddle is here (This is using bootstrap external resource)

Any help would be appreciated.

Tags:

3

Answers


  1. 0

    You can use a gradient background:

     background: linear-gradient(to right, rgba(30, 87, 153, 1) 0px, rgba(32, 124, 202, 1) 10px, rgba(0, 0, 0, 1) 11px, rgba(0, 0, 0, 1) 100%);

    http://jsfiddle.net/vtp7omx2/1/

    Login or Signup to reply.
  2. 0

    Add this to your CSS:

    .active {
    background-color: #000; border-left:5px solid #069;
}

    see fiddle

    Login or Signup to reply.
  3. 0

    You could use ::before like this:

    .active::before{
    content: ' ';
    width: 10px;
    height: 50px;
    background-color: #3596d5;
    display: inline-block;
    position: absolute;
}

    See fiddle http://jsfiddle.net/vtp7omx2/3/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search