CMS Development

wmflan39
Colaborador

Struggling to center menu text

resolver

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

0 Me gusta
1 Soluciones aceptada
wmflan39
Solución
Colaborador

Struggling to center menu text

resolver

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

Ver la solución en mensaje original publicado

5 Respuestas 5
stefen
Asesor destacado | Partner
Asesor destacado | Partner

Struggling to center menu text

resolver

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

Stefen Phelps, Community Champion, Kelp Web Developer
0 Me gusta
wmflan39
Colaborador

Struggling to center menu text

resolver

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

0 Me gusta
stefen
Asesor destacado | Partner
Asesor destacado | Partner

Struggling to center menu text

resolver

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

Stefen Phelps, Community Champion, Kelp Web Developer
wmflan39
Colaborador

Struggling to center menu text

resolver

Thanks, Stefen,

 

I'll apply your suggestions later this morning.

 

WmF

0 Me gusta
wmflan39
Solución
Colaborador

Struggling to center menu text

resolver

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