Struggling to center menu text

Developer Support CMS Development
1

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

2

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

3

Thanks for the quick response, stefen!

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

Looking Bad: Ambrells Bemerkenswerte Induktionserwärmung

(Germans use so many letters! ;^)

WmF

4

@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.

5

Thanks, Stefen,

I’ll apply your suggestions later this morning.

WmF

6

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