Struggling to center menu text

SOLVE
Highlighted
Regular Contributor

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

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Contributor

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

View solution in original post

5 Replies 5
Highlighted
Regular Advisor | Partner

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

Stefen Phelps, Community Champion, Kelp Web Developer
Reply
0 Upvotes
Highlighted
Regular Contributor

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

Reply
0 Upvotes
Highlighted
Regular Advisor | Partner

@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
Highlighted
Regular Contributor

Thanks, Stefen,

 

I'll apply your suggestions later this morning.

 

WmF

Reply
0 Upvotes
Highlighted
Solution
Regular Contributor

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

View solution in original post