Get a free trial // Grow your CSS skills // Land your dream job

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

  • # March 15, 2013 at 11:32 am


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

    this is the problem

    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 ;

    # March 15, 2013 at 12:06 pm

    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.

    # March 16, 2013 at 6:08 am

    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


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed