[Resolved] How to correct page header image display in Mobile

[Amit]

Hi,
I am facing an issue regarding the page header image display in mobiles. Only half a part of image is visible and half is cropped. How can I correct that. Also, I see no parallex effect even after enabling it? The website is http://www.vacuumcleanerbuddy.com

[Leo]

Hi there,

The link to the site is not working for me. Can you double check? Thanks!

[Amit]

Sorry, it’s http://www.thevacuumbuddy.com

[Leo]

Unfortunately background images are not responsive by nature.

I think the best option here is to set a different image specifically for mobile with this CSS:

@media (max-width: 768px) {
    .home .generate-content-header {
        background-image: url(https://MOBILE-HEADER-IMAGE-URL-HERE);
    }
}

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

[Amit]

Well, thanks a lot for that. What should be the perfect image dimensions for a mobile image?

Additionally, there is one more issue I am facing. I have set the Navigation to transparent to merge into the image, but when we scroll down, The navigation menu text and the content all mixes up. What’s the solution for that. Can we set a background color for the Navigation menu? Also can we set that background to display after the menu completely passes from header image.

[Leo]

A longer image like most cellphone screen would likely work better. Best thing to do is to try it out.

Can you disable maintenance mode so I can look at the second issue? Thanks!

[Amit]

I have disabled the maintenance mode Leo.
In this forum, it’s trouble finding your posts. There is no single profile link were I can clearly see my created threads.

[Leo]

Hmm I still see it maintenance mode. Can you double check?

To find your post, click on your name then you will see your forum profile.

[Amit]

Done, forgot to select the Disable option in maintenance.

To see my name, I need to find one of my post…

[Leo]

Try this CSS:

.main-navigation.navigation-stick {
    background-color: #ffffff;
}

If you subscribe to this post then you should get an e-mail notification everytime there is a new reply with a link that takes you here.

[Amit]

Leo, the next issue I am facing is about the Mobile Navigation. With transparent background in menu, the links are somewhat overlapping the text on the image which is looking cumbersome. I think, I should change the background of mobile navigation to white and the text to black. Also the padding to the left in the dropdown mobile menu is very less again making it look terrible. Can you please have a look and give the best solution.
For your next update in theme, you can add to give full control over mobile navigation in both normal and sticky formats as that is needed when doing transparent navigation.
Transparent Navigation looks good but it’s daily coming out with some styling problems. Is there some site that is using the same kind of adjustments and is done with problems?

[Leo]

As for now you will have to use some CSS. Jamal provides a good summary for mobile menu colors here:
https://generatepress.com/forums/topic/how-to-style-navigation-menu/#post-347001

We are looking into adding this feature in the future.

Let me know if this works.

[Amit]

It was getting not up to expectations so I dropped the idea of transparent navigation. Now it’s a normal navigation with menu on float right. One thing I want to correct here is the vertical alignment of the navigation menu to middle. What’s the CSS for that?

[Tom]

Your site seems to be down right now – can you take a look?

Thanks!

[Amit]

Tom, there is some configuration problem. Append www with the site or check from here http://www.thevacuumbuddy.com

[Author]

Posts