Masonry grid + sidebar and few problems on phones/tablets

Hi,

I want to use masonry grid layout with sidebar. Is there any option to add the sidebar too? Right now if I choose masonry grid layout the sidebar disappears. I know it may get too wide if there’s 3 columns for posts, maybe option to make 2 columns and add sidebar instead of 3rd column?
Example how I would like it

There’s also problem choosing child menu on the site on touch devices tablets/phones.

Child menu problem on phones and tablet portrait mode.
It’s really hard to hit the arrow to see child menu. Most of the times I hit Info and it opens that page. Maybe make the arrow button bigger? It needs a solution on mobile devices.
Phone menu problem

Child menu problem on tablets landscape mode:
On landscape mode it is impossible to choose child menu link on tablets.
Child menu problem tablets (pc and tablet screenshot)

Sorry can’t modify my previous post anymore.

The second row post appear from right. I want them on left.
Second row posts

Edit 3:

Only problems I have now are with child menus on tablets/phones.

I got working 2 column masonry layout with sidebar.

Hello @Flow2025,

Please try to use the following CSS code in order to resolve your submenu arrow issue.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

.btn-submenu {
    padding: 15px;
    background-color: rgba(255,255,255,0.03);
}

I will discuss tablet submenu issue with our Developer.

Kind Regards, Roman.

Thank you,

This modification works well for tablet/phones. Maybe just bring it in with future update.?

Is there any option to bring arrow kind of elements to computer browser as well? I mean right now you can see only links. People can discover submenus until they hover the cursor on the link. May be small arrow?

Thanks,

Please try to use the following CSS code in order to add little arrow after main menu items that contain submenu.

nav#mainnav > div > ul > li.menu-item-has-children::after {
    content: "\f107";
    font-family: "FontAwesome";
    color: white;
}

Kind Regards, Roman.

Hi, I tryed to add this code to custom css, but it doesn’t work for me.
Arrows next to menu links

Hello @flow2025,

I have just tested that code once again on my localhost and it works for me.

Please try to add it in Dashboard → Appearance → Customize → Additional CSS.

Kind Regards, Roman.

Hi Roman,
One of the questions tha Flow2025 posted is of my interest: I also need to use a 2 columns masonry layout with a sidebar. I was able to add the sidebar, but this is coming at the bottom of the page instead of going at the side.
My website is: www.lorennaeunapio.com/blog but I am still using a “coming soon” page. Not sure if you will be able to check it.

Thank you very much!

Hello,

Can you please let me know when your site is live?

Kind Regards, Roman.

Hi Roman!
It´s live now, but I don´t know why the sidebar that was at the bottom of the page disappeared, so I put it again to masonry grid. However, I only have one blog post so far. My question is exactly the same of the first post of this topic: I´d like to include two columns at the grid style + sidebar.
Thank you very much!

Hello,

It looks like your issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Hi Roman,
Ok. Thanks for your quick reply and for the information.
Regards, Lorenna

You are welcome Lorenna,

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.