CMS Development

wmflan39
Contributeur

Struggling to center menu text

Résolue

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 Votes
1 Solution acceptée
wmflan39
Solution
Contributeur

Struggling to center menu text

Résolue

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

Voir la solution dans l'envoi d'origine

5 Réponses
stefen
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Struggling to center menu text

Résolue

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

Stefen Phelps, Community Champion, Kelp Web Developer
0 Votes
wmflan39
Contributeur

Struggling to center menu text

Résolue

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 Votes
stefen
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Struggling to center menu text

Résolue

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

Struggling to center menu text

Résolue

Thanks, Stefen,

 

I'll apply your suggestions later this morning.

 

WmF

0 Votes
wmflan39
Solution
Contributeur

Struggling to center menu text

Résolue

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