Global block in Ubermenu

[cvdw]

Hi,

I try to add a button to Ubermenu.

I made a global block with the button and put the shortcode in by adding a Ubermenu Advanged items > custom content item in the menu. The button is in the menu but with margins while I put off Global container in the global block and all margins and paddings of.

.m5r-1 > .x-row-inner {
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-content: center;
margin-top: calc(((20px / 2) + 1px) * -1);
margin-right: calc(((20px / 2) + 1px) * -1);
margin-bottom: calc(((20px / 2) + 1px) * -1);
margin-left: calc(((20px / 2) + 1px) * -1);
}

How can I get rid of those margins to align the menu properly?

Page: https://cresult.nl/wp/home-4/

[ruenel]

Hello @cvdw,

Thanks for writing in! Please edit your global block and in your Row element settings, remove the gap width and gap height in the column layout.

Best Regards.

[cvdw]

I did but still the same space… The button is also smaller and also the font in the button as it is in the global block. Please login to my site and try.

This is how I want it as the result:

I read all topic I can find in the forum like Remove Spacing from Global Blocks
but still no solution to remove ALL spacings from a Global block…

[cvdw]

I now solved it to add this css but I don’t think this is the right way to remove all spaces from a Global block…

.m5r-1 > .x-row-inner > * {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

[ruenel]

Hey @cvdw,

It is good to know that you have resolved the issue. The CSS code is valid and correct as well.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

[cvdw]

Yes, it’s working but I think everybody want to use Global Block without any spaces to have full control and this should not be the way. In the past there was a button REMOVE ALL SPACES but that’s gone. There must be a way to remove all spaces without adding custom css.

In the docs https://theme.co/docs/global-blocks is this:

Do Global Blocks come with any extra markup?
Global Blocks will always be wrapped in a Section, Row, and Column. Because Global Blocks need to support whole sections, this means that all of the markup that comes with a Section is always output around your content. If you wish to create a Global Block that is just a singular element as mentioned previously, you will need to make sure to remove all of the spacing (e.g. margins, padding, et cetera) that comes with these containing elements. You can quickly remove all spacing from containing elements by clicking the Remove Spacing button at the bottom of your Sections in the Layout pane.

I can’t find this Remove Spacing button at the bottom of your Sections in the Layout pane.

As said, if I manualy set all margins and paddings to 0 and turn off Global container, I still get spaces around the Global Block. Is this a bug or am I missing something…?

[ruenel]

Hello @cvdw,

The Remove Spacing button was already deprecated because of the new Section, Row, and Column structure. it is now using the CSS Flexbox which is why you are seeing the margins which is for the gaps.

/* this is an example if you have a gap width and height of `20` pixels */

margin-top: calc(((20px / 2) + 1px) * -1);
margin-right: calc(((20px / 2) + 1px) * -1);
margin-bottom: calc(((20px / 2) + 1px) * -1);
margin-left: calc(((20px / 2) + 1px) * -1);

This does not affect the position of the element because it is a negative value. The real issue with your global block is that it turns out, you have added this CSS code:

.menu-button {
    font-size: 1.4em;
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0.75em;
    margin-left: 1.125em;
}

If you want to align the global block button with the menu items, you will have to increase or decrease the bottom margin to the most appropriate value. You also need to take into account the font size of your custom CSS and the actual font size of the Button element in your global block

Hope this makes sense.