responsive nav li background .. with till the end of div

[janis]

hi

i have a challenge and at this moment i don’t know how to solve it..

this is the problem
http://img818.imageshack.us/img818/6057/56451691.jpg

when i make it responsive and the screen goes smaller the item block goes on the second row. that’s great.
but it leave a big hole in it..

when i give the nav the same background then i don’t have this problem. great!..
but because i have rounded corners of the li. you don’t see it anymore because of the nav background.

some how the nav background should be at the end …

• 
  

nav, li{
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(80, 132, 185)), to(rgb(57, 110, 164)));

border-top-left-radius: 0.31em;
border-top-right-radius: 0.31em;
border-bottom-right-radius: 0.31em;
border-bottom-left-radius: 0.31em;

}
nav li a{
padding: 20px 1.75em ;
height: 15px ;
}

[Paulie_D]

Hmmm…note sure there is any easy answer to your question in the terms you are thinking about.

The only option I can think of is to double the height of your nav at certain breakpoints…such as when the menu goes to two lines.

[wolfcry911]

http://codepen.io/wolfcry911/pen/BqiCL

[janis]

thx wolfcry!

so if i’m right.. you give the blue on the nav and a and white background on the li..

and rounded corners on a

:)

[Author]

Posts