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…
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:
#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;
}
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!