CMS Development

wmflan39
Colaborador(a)

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 Avaliação positiva
1 Solução aceita
wmflan39
Solução
Colaborador(a)

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

Exibir solução no post original

5 Respostas 5
stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

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 Avaliação positiva
wmflan39
Colaborador(a)

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 Avaliação positiva
stefen
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

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(a)

Struggling to center menu text

resolver

Thanks, Stefen,

 

I'll apply your suggestions later this morning.

 

WmF

0 Avaliação positiva
wmflan39
Solução
Colaborador(a)

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