Centering Main for Desktop ?.

[jackyjoy123]

Hello,

I really appreciate all the work that went into this to make it useable by such a large audience and to look so refined!

Is there a good way to center the menu items (meaning the entire list) for desktop instead of them aligning left? I set a width for .sm-clean and gave it margin: auto, but it seems like a nasty hack. I know if a user has a smaller desktop resolution but not small enough to qualify for the mobile menu version, some of the <li> items might drop. Is there a better approach? Thanks! My code:

@media (min-width: 768px) {

.sm-clean {
    width: 75%;
    max-width: 960px;
    margin: auto;
    background: RGB(197,53,28);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
  }

thanks
jackyjoy

[admin]

Hi, not sure why you consider this a hack. It’s actually the proper way to center a block element – i.e. constraining its (max-)width and setting the left/right margin to auto.

If you are too worried about some of your items wrapping at lower viewport widths, you could consider the following solution:

https://www.smartmenus.org/about/themes/#demos-7

but I personally don’t think that is a critical issue since all items remain usable even if some of them are wrapped.

[Author]

Posts