CODEWITHSUNDEEP
htmlcssnavsidebar
Ralphunreal
Ralphunreal

Reputation: 193

Trying to make a certain nav bar

I am trying to make a vertical side nav bar on the left of a page and it looks like this:

https://i.sstatic.net/MORxw.png

How can i get the nav bar to have that space and style? Right now i have the navs on the left,i just need that kind of background for them.

jsfiddle - http://jsfiddle.net/gLpm9pr0/

<aside class="sidebar">
    <nav>
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">about us</a></li>
            <li><a href="">orders</a></li>
            <li><a href="">gallery</a></li>
            <li><a href="">contact</a></li>
        </ul>
    </nav>
</aside>



.sidebar{
float:left;
margin:20px;
margin-right:150px;

}

nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;

}

Upvotes: 0

Views: 54

Answers (2)

denmarq
denmarq

Reputation: 88

Try this css:

.sidebar{
float:left;
margin:20px;
margin-right:150px;
}

nav ul li a{
text-decoration:none;
font-family:myriad pro;
font-size:18px;
color: white;  
}

nav ul li {
list-style-type: none;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 4.0em;
padding-right: 1.0em;
border: 1px #CBAFA2 solid;
margin-bottom: 0.15em;
background-color: #CBAFA2;
}

nav ul li:hover {
background-color: #3D2316;
border-color: #3D2316;
}

To get rid of the bullets in front of your list you want to change nav ul li, not nav ul li a. Play around with the values if you want to get closer. For the arrow-like structure while hovering, I would load a background image. Not sure if there's another solution.

Upvotes: 1

Khris Azuaje
Khris Azuaje

Reputation: 103

You need to use the CSS property: Background-image: url(imagepath.png) and set a path to an image like the ones you want.

Upvotes: 0

Related Questions