[Resolved] buttons do only align correctly if I gat rid of their wrapper

[Jo]

Hi guys,

here´s another strange thing:

If you look at the mobile/ tablet menu of https://b2wxqamp.myraidbox.de/ you can see the first three buttons incorrectly aligned (maybe not the DEUTSCH one, also I had them all aligned to the center within the buttons wrapper.

Then I just duplicated them and placed the three button duplicates OUTSIDE THE WRAPPER that is still holding the first three buttons and without their WRAPPER element and they aligned perfectly centered even without the DE-button doing the extra strange thing of stretchinmg itself out (I didn´t check FILL HORIZONTAL SPACE!)

I thought all buttons need wrapper?! But it seems the wrapper can also step into the way of doing what he´s supposed to do (i.e. aligning buttons easily)

Another thing. On the mobile the button social media icon toolbar is not showing up any more. Are there too many items in the menu?

And, last and least for today: The mobile/tablet nenu (the three horizontal bars on the top right corner) have some slightly greyish background. How can I change that? How can I get rid of it?

Kind regards from Berlin,

Jo

[David]

Hi there,

1. in the Editor select the wrapper container, because its a Flex Column you need to set the Align Items to Center.

2. The Wrapper is only necessary if you wish to align items relative to that wrapper, for example in a row for desktop and stacked on mobile.
If you’re just stacking them and they are aligned to a parent container then the extra wrapper is not required.

3. Add some extra margin to the last item in the Off Canvas. Which you can do in the editor if its a block that has margin control. Or use some CSS:

.slideout-navigation.do-overlay .inside-navigation >:last-child {
    margin-bottom: 150px;
}

This make sure it doesn’t get hidden behind the phone browser UI.

4. Add this CSS:

nav.mobile-menu-control-wrapper .menu-toggle {
    background-color: transparent;
}

[Jo]

Hi David,

1. unfortunately I don´t get the options ALIGN ITEMS to CENTER. when I select the wrapper. I only get SPACING MARGIN (for boxes) Stack Vertically and Fill Horizontal SpACE

2. “If you’re just stacking them and they are aligned to a parent container then the extra wrapper is not required.”, but I took them out of the wrapper (their container) which means there was NO parewnt container any more at all, but that was when they actually behaved/ aligned the way I wanted it: all smack centered with the text inside of them also centered!

3. O.K. That works. Thanks

4. I just pasted that code into Additional CSS in the Customizer like that

/* GeneratePress Site CSS */ /* Page and post title box shadow */
.text-shadow {
text-shadow: rgb(50 50 0 / 50%) 5px 5px 10px;

nav.mobile-menu-control-wrapper .menu-toggle {
background-color: transparent;
}
} /* End GeneratePress Site CSS */

and it turned all red and didn´t work at all.
But anyway, why do I need to override something with new code which is a variation from the default (which should be white background). Just tell me how it was changed to grey and I will unchange the change. But I need to know where to find it and how it is cahnged back.

Thanks!

[Jo]

“1. in the Editor select the wrapper container, because its a Flex Column you need to set the Align Items to Center.”

Actually these features “Align Items to Center” really should included in the wrapper, but they are only adhered to the individual button instances and only work at desktop level. At tablet and mobile level the buttons instantly jumpt to the left side, although properly centered by me.
Maybe instead of DISPLAY DEFAULT (which as you said is FLEX I should choose something less confusing (what is that anyways? I think I can live without stuff that overcomplicate things) I should use Block or Inline Block to get them to damn center themselves?

[Jo]

Hi David! I found the solution for the CENTER issue. Don´t worry about it any more, thank you!

But this remains unsolved:

“And, last and least for today: The mobile/tablet nenu (the three horizontal bars on the top right corner) have some slightly greyish background. How can I change that? How can I get rid of it?”

Please tell me how and where it was changed and how I can change it back or delete the css, html or whatever caused it….

[David]

4. The code i provided, add it to the top of your CSS. As where you added it was inside another CSS rule, so it would break things 🙂
The style is baked into the theme, so to remove it requires either:

a. CSS
b. use the Mobile Header in Customizer > Layout > Header.

See if that works.
Then we can revisit the buttons 🙂

[Jo]

Hi David,

actually I´d like to try both methods to better understand the mechanics and maybe not have to ask these questions again, but I am hitting a wall such as

a. CSS “The code i provided, add it to the top of your CSS” – What does “ADD IT TO THE TOP OF YOUR CSS” actually mean? I didn´t employ any CSS apart from the code you provided. So where do I find it apart from the ADD CSS in the CUSTOMIZER, which by the way has disappeared. I have been using it, but now it isn´t available in the customizer anymore (why are things getting so confusing?)

b. use the Mobile Header in Customizer > Layout > Header. – I followed the path, but then what? There´s no option available for me to change the background of the mobile/ tablet menu. Only Header presets – header width – inner header width – header alignment – header padding – use navigation as header – mobile header

[David]

a. Lets start with the CSS.
In your reply above you said this was your CSS:

/* GeneratePress Site CSS */ /* Page and post title box shadow */
.text-shadow {
    text-shadow: rgb(50 50 0 / 50%) 5px 5px 10px;
    
    nav.mobile-menu-control-wrapper .menu-toggle {
    background-color: transparent;
    }
    } /* End GeneratePress Site CSS */

The problem is that CSS is broken. There is the CSS i provided inside another CSS rule.

When i say add to the top, i mean so it would look like thos:

nav.mobile-menu-control-wrapper .menu-toggle {
    background-color: transparent;
}
/* GeneratePress Site CSS */ /* Page and post title box shadow */
.text-shadow {
    text-shadow: rgb(50 50 0 / 50%) 5px 5px 10px;
} 
/* End GeneratePress Site CSS */

Then that CSS should work.

b. simply enabling the Mobile Header would remove the background from the Hamburger menu.

[Jo]

THAT CSS WORKED LIKE A CHARM! THANKS! 🙂

[David]

Glad to hear that!

[Author]

Posts