mobile menu not on the same line

Hi Ree,

Can you try adding this CSS through Appearance > Customize > Additional CSS:

#mobile-header nav#secondary-navigation .main-nav > ul {
    display: flex !important;
    flex-direction:row;
    flex-wrap:nowrap;
}

#mobile-header nav#secondary-navigation .main-nav > ul > li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mobile-header nav#secondary-navigation .main-nav > ul > li a img{
    height: 17px;
}

I've added it has became 2 lines now. can I squeeze into one? There are some empty spacing between elements.

Hi there,

in Customizer > Layout > Secondary Navigation, you can reduce the Menu Item Width, this will reduce the padding either side of those menu items.

thank you, I now have this issue where the icon added in block has too much margin on the right. How can I reduce it please?

I've circled the elements in red for your convenience

Thats a GenerateBlocks button block, if you edit it, you can change the Right Margin in its Spacing settings.

i did that but nothing changed.

Can you provide admin login credentials so we can take a closer look?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

the element is in appearance > elements > my account

That's odd. Can you try recreating that specific button to test?

i created a new button but it is the same...

Can you try either of these in GenerateBlocks > Settings?:

a) Choose Inline Embedding for the CSS Print Method in Settings > GenerateBlocks.
b) Regenerate your CSS files in Settings > GenerateBlocks.

i did a check, css print method was previously set as inline embedding. I also regenerated CSS files but did you see any changes on the frontend?

Try editing the right margin on the button now.

its working now, thanks!
what changed please?