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

    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 ;
    }

    # 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.

*May or may not contain any actual "CSS" or "Tricks".