CODEWITHSUNDEEP
javascripthtmlcss
Ryan
Ryan

Reputation: 141

vertical to horizontal navigation

I have a problem to convert this below navigation bar from vertical to horizontal.

http://codepen.io/anon/pen/bdpRjx

Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.

*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px; 
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}

enter image description here Thank you very much for any suggestion. Regards Ryan

Upvotes: 1

Views: 52

Answers (1)

thewatcheruatu
thewatcheruatu

Reputation: 342

Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:

.nav-container li {
    box-shadow: 0 2px 2px 2px black;
    display: inline-block;
    width: 300px;
}

You'd need to remove the box shadow and width from .nav-container and put it here instead.

You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?

Upvotes: 1

Related Questions