SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I make menu links extend all the way to the right?

    Hi,

    URL: http://goo.gl/b31gXC

    I'm trying to make the menu links under the "Browse by Project" ribbon extend all the way to the right so that the right most link is aligned with the right side of the ribbon. If I increase the width of the links or if I increase the right margin, it's too much and the links break to a new line. How can I make them extend all the way to the right without falling to a new line?

    I tried adding this but it isn't working. I'm sure it's because the "count" is off. It's not every 3rd menu item...

    .top-category-menu li:nth-child(3n+3) {
    margin-right: 0;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    One problem you have is that the list items have a % width but px margins, meaning that the menu will break at some widths. I've played around with some styles and these work better:

    Code:
    #menu-top-categories li a {
    margin: 0 2% 10px 0;
    }
    
    #menu-top-categories li.tutorials a, #menu-top-categories li.videos a {
    width: 49%;
    }
    
    .top-category-menu li a {
    width: 32%;
    }
    
    #menu-top-categories li.videos a {
    margin-right: 0;
    }
    
    #menu-top-categories li:nth-child(3n+5) a {
    margin-right: 0;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Ralph.

    The only thing that isn't working this:

    .top-category-menu li:nth-child(3n+5) {
    margin-right: 0;
    }

    I need those smaller items to be 3 per line. I played with the 3n+5 and various other numbers, and I can't get it to work. Any ideas?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Glad it helped.

    Quote Originally Posted by susannelson View Post
    The only thing that isn't working this:
    Is there any reason you didn't try out what I suggested?

    Code:
    #menu-top-categories li:nth-child(3n+5) a {
    margin-right: 0;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you again, Ralph. It's working for me now. I think I just need to reduce the font size for the smaller screens and then I'll be set. I appreciate your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •