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

Home Forums Support How to correct page header image display in Mobile

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #356197
    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

    GeneratePress 1.3.48
    #356288
    Leo
    Staff
    Customer Support

    Hi there,

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

    #356369
    Amit
    #356372
    Leo
    Staff
    Customer Support

    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/

    #356554
    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.

    #356690
    Leo
    Staff
    Customer Support

    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!

    #356735
    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.

    #356759
    Leo
    Staff
    Customer Support

    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.

    #356798
    Amit

    Done, forgot to select the Disable option in maintenance.

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

    #356839
    Leo
    Staff
    Customer Support

    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.

    #358900
    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?

    #359315
    Leo
    Staff
    Customer Support

    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.

    #359503
    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?

    #359557
    Tom
    Lead Developer
    Lead Developer

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

    Thanks!

    #359595
    Amit

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

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.