Struggling to center menu text

[wmflan39]

I'm using margin-left/-right to position my primary menu. Works OK for our EN site but borks for our DE site.  I'm just looking to make use of the full width for any/all menus, but centered.

Relevant CSS in our stylesheet appears to be 

.custom-menu-primary .hs-menu-wrapper > ul{
background:{{ ulColor }};
margin-left: 25%;
margin-right: 20%;
{{ transition("all .1s ease-in-out") }}
}

I've tried adjusting width, text-align: center, margin-left/-right: auto, etc. to no avail. Is there something about the menu widget that is preventing my attempts at centering?

WmF

[stefen]

@wmflan39 do you have a link we can look at? It's probably a float issue.

[wmflan39]

Thanks for the quick response, stefen!

Looking Good: https://www.ambrell.com

Looking Bad: https://www.ambrell.com/de

(Germans use so many letters! ;^)

WmF

[stefen]

@wmflan39 on line 2723 update your CSS to:

@media screen and (min-width:769px) {
  .custom-menu-primary .hs-menu-wrapper {
      display:block !important;
      background: transparent !important;
      text-align: center;
  }
}

And on line 2512 remove the margins:

.custom-menu-primary .hs-menu-wrapper > ul{
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

After that you'll just need to update your dropdown text to be left aligned. Doing it this way won't limit the width in any artificial way so you can be a little more flexible with the length of text.

[wmflan39]

Thanks, Stefen,

I'll apply your suggestions later this morning.

WmF

[wmflan39 · Accepted solution]

Stefen,

Perfect! Thanks very much.

For some reason 'your' line numbers are very different from the ones I see in the style sheet, but the code segments are easy enough to find.

Thanks again.

WmF