[Support request] How to add space about header on mobile, issue with comments on blog, and other

[Gabriel]

Wondering how to add space above the menu and logo on mobile. The logo is too close to the top of the screen.

Also, I am having issues with blog comments. Not sure if this is a generatepress issue or an elementor issue, but getting a server error when I try to post a test comment on my blog.

Finally, on mobile, sometimes the menu and site logo and search icon all line up and sometimes the menu drops down to a second line. I want them to always be on one line.

Thanks,

Gabriel

[Leo]

Hi there,

– Try this CSS:

#mobile-header {
    padding-top: 10px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

– I don’t believe the comments issue would be coming from GP or Elementor.

I just posted a test comment in “100 images from 2017” without any issues though (might want to delete that).

– This is likely because there is not enough room for the logo + search icon + toggle + menu label text on smaller mobile screens.

This layout is more for smaller/square-ish logo.

I think the best solution would be to remove the menu label text:
https://docs.generatepress.com/article/mobile-menu-label/

Let me know if this works for you 🙂

[Gabriel]

The comments issue was something I resolved with my web host. Thanks for testing that out.

The menu issue persists. I removed the text, and it still aligns correctly on some pages and incorrectly on others.

The CSS code worked to add padding on the top. Thank you.

Besides for the menu going to center sometimes, wondering if there is there a way to have the images run from edge to edge and have the text be inset from the sides with a margin in mobile?

Thanks,

Gabriel

[Leo]

The menu issue persists. I removed the text, and it still aligns correctly on some pages and incorrectly on others.

Which page can I actually see the issue?

1. Are you referring to this line?
https://www.screencast.com/t/JO8er6vFlS2I

If so that’s the default box-shadow added to the sticky mode which can be overwritten with this CSS:

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: none;
}

2. Not quite sure if fully understand the question about the search bar part. As for the content part, since you are using Elementor, it would be the easiest to use this option from GP to remove the theme padding and let use Elementor to handle all the padding options:
https://docs.generatepress.com/article/page-builder-container/

3. Is there a specific page I can see the issue? I’m not seeing the issue on the home page. If it’s using Elementor then you might need to check with their support 🙂

[Gabriel]

As far as the navigation bar, here is a screenshot of how I want it to look. It sometimes functions correctly, but most of the time across all pages the navigation displays with the logo and search icon on one line and the menu (with or without text) on a second line as you can see here.

I am sorry if the rest of my question was not clear. It is a little tricky to describe. I am trying to configure the content to display images so that they span the full width of the screen from edge to edge while leaving the text with a border so that it does not run to the edges of the screen. Ideally, the images would maintain their aspect ratio and resize to fit the width of different screen sizes.

Thanks for you help. Your customer service at generatepress is so impressive.

Gabriel

[Leo]

That’s really odd how it doesn’t work on some pages. Can you first make sure that you are using the suggested setting in Autopimize here?
https://generatepress.com/fastest-wordpress-theme/

As for the padding question, you will want to use the page builder container setting I mentioned above to remove GP’s padding then use Elementor to configure to the desired result. Might be a good question for their support.

Glad we’ve been helpful 🙂

[Gabriel]

I do have autopimize installed. It actually occurs on the same page sometimes, but not always. Maybe if I padded the menu and search icon over to the left a little, it would fix it. Can you give me CSS code to try that. Or if you have another idea, let me know.

Gabriel

[David]

Hi there,

these sort of issues occur because occasionally the autopimize cache ( or any cache ) messes with the order of the CSS. It is advisable, that you flush and disable autoptimize when you’re customizing the site or creating new content especially with a pagebuilder.

Try that, then re-enable the cache.
If the issue persists then disable autoptimize and let us know and we will provide you with the exclusion rule you need in autoptimize

[Gabriel]

David

I disabled the three plugins that I thought might be causing the issue, comet cache, autoptimize, and optimole. It appears as though optimole (https://optimole.com/) is causing the issue with the menu bar displaying on the second line. Wondering if you have any recommendations for a work around. I can also contact optimole, but their tech support is very slow.

Thanks,

Gabriel

[Leo]

You could try turning certain options on and off in the plugin to see if any of them is causing the issue.

If not then it would be good to check with their support.

[Author]

Posts