CMS Development

wmflan39
投稿者

Struggling to center menu text

解決

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 いいね!
1件の承認済みベストアンサー
wmflan39
解決策
投稿者

Struggling to center menu text

解決

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

元の投稿で解決策を見る

5件の返信
stefen
キーアドバイザー | Solutions Partner
キーアドバイザー | Solutions Partner

Struggling to center menu text

解決

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

Stefen Phelps, Community Champion, Kelp Web Developer
0 いいね!
wmflan39
投稿者

Struggling to center menu text

解決

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 いいね!
stefen
キーアドバイザー | Solutions Partner
キーアドバイザー | Solutions Partner

Struggling to center menu text

解決

@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
投稿者

Struggling to center menu text

解決

Thanks, Stefen,

 

I'll apply your suggestions later this morning.

 

WmF

0 いいね!
wmflan39
解決策
投稿者

Struggling to center menu text

解決

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