1

Hey guys so I have categories: Round Pendants, Ellip Pendants, Bangles, Oval ID Bracelets

At the top in my Nav Menu it lists them correctly :) How can I change the CSS so they all take up the same amount of space?

Since Bangles is the shortest in word length it also takes up the least amount of space. I want all of the categories to take up the same amount of space for example to fit 5 categories on each row take up 20% width space.

The only problem is when I change CSS it messes up when the window is resized! Magento has a cool way for when the window shrinks to a certain size it compacts it into a drop down menu of categories.

TLDR: What's a great way for categories in the nav menu to take up the same amount of space even when window resizes? Window is normal size

When window shrinks

I'll be by the computer all day so feel free to ask questions for clarification and I'll respond as soon as I can! Thanks everyone!

Improve this question
1
  • If you don't ever want it to become a dropdown the cleanest way would be to remove the JS that causes that and control the CSS with media queries. Without seeing the code/site in question I can't really provide the code to fix it sorry.
    – Ben Crook
    Commented Oct 6, 2016 at 20:19

1 Answer 1

Reset to default
2

Without seeing css and HTML for the navigation i can't suggest a 100% right solution. May be the following will fix the problem.

Set equal width in percentage and make the font size in (rem - em). with base font value in px.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.