[Support request] Styling issues

[John]

Hi,

I just switched over to Generatepress, all pages are built with elementor and i have following styling issues:

I inserted a logo in the left sidebar menu, on top. The logo is only shown when you scroll down but then the language switcher disappears. People need to scroll up when they want to change language. I have been forced to delete the logo. Is there a way to have the logo and language switcher there without having to reduce the menu items height too much ?

The full width picture has been moved a wee bit, so you see a bar of background color above the picture and when scrolling down you need to scroll down the distance of this bar before text begins to appear. How can i move the picture so this bar is gone. I have checked all possible padding and set them to 0

I would like to have the sidebar menu moved a bit down, but can not find where i need to insert some padding to get this done.

I would like to have the footer widget lined with the right edge of the sidebar. Using padding gets this done, but results in a horrible picture on mobile. How can i get this padding on desktop en tablet only ?

On tablet the menu bar takes away a part of the picture, on mobile and desktop it is OK.

A bunch of questions, i hope you can help me solve them.

Thanks,
John

[John]

I have fiddled around with the logo (question 1)
When a page is served it looks like this.
https://postimg.org/image/nou9xkaxj/
When you scroll down a little it looks like this.
https://postimg.org/image/pw33ywsnb/

The last screenshot is how the page ought to be served, before any scrolling.
Any ideo how this can be done ?

The page header and title are hidden by means of CSS, it looks like there is still some place reserved for them.

John

[John]

Issue with logo appear and disappearing solved (set to sticky & static)
The bar however remains.

[John]

The bar is also solved, thanks to https://generatepress.com/forums/topic/white-space-in-between-navigation-menu-bar-and-content-widget/

That leaves me only 2 questions
I would like to have the footer widget lined with the right edge of the sidebar. Using padding gets this done, but results in a horrible picture on mobile. How can i get this padding on desktop en tablet only ?
As a workaround i created 2 text widget with text color of the background. This looks much better on both desktop and mobile, but it would be nicer if it could be lined with the right side of the sidebar.

On tablet the menu bar takes away a part of the main top picture on every page, on mobile and desktop it is OK.

[Leo]

Hi there,

We would need to use CSS and and make it desktop/tablet only. Try:

@media (min-width:769px) {
    .footer-widgets {
        padding-left: 200px;
    }
}

The menu isn’t actually covering up the background image. It’s just the background image scaling problem. Might be best to check with Elementor on this one.

[John]

Hi Leo,

Was a bit cornered the rest of the day, will try the CSS tomorrow.

Are you sure the cropped picture on tablet is an elementor issue ? I switched from Avada to Generatepress and with Avada the tablet pictures were not cropped.

[Leo]

The background image size is controlled by their padding.

For example, it’s currently using this:

@media (max-width: 767px) {
    .elementor-6 .elementor-element.elementor-element-5f710a92 {
        padding: 0px 30px 0px 30px;
    }
}

If you add this CSS to add more top padding, you should be able to see more of the picture on the top:

@media (max-width: 767px) {
    .elementor-6 .elementor-element.elementor-element-5f710a92 {
        padding: 100px 30px 0px 30px;
    }
}

[Author]

Posts