Mobile Header Question

Hi there. I was wondering if you could tell me how to use a custom background image for a mobile menu? I’m using Themify Ultra as a theme, but can’t find anything in regards to this in their support forums.

Cheers,

Tomas

  • Kasia Swiderska
    • Support nomad

    Hello Tomas,

    I’m not familiar with that theme so I’m not sure if that is possible with theme options.

    But I’m sure that can be achieved with some custom CSS, like that:

    @media screen and (max-width: 480px;) {
    .you-menu-selector {
    background: url('your-custom-image-path.jpg') 0 0 no-repeat;
    }
    }

    But I would need to see live site to check code exactly.

    kind regards,

    Kasia

  • Thomas Tejeda
    • Flash Drive

    Hi Tomas,

    In addition to Kasia’s answer, it looks like you’ll need to use the background-size property to adjust the image size to fit your needs. Try the following options and see if either one gets you closer to what you would like.

    Option 1:

    .page-id-208 #headerwrap {
    background-size: cover;
    }

    Option: 2

    .page-id-208 #headerwrap {
    background-size: 100% 100%;
    }

    Regards,

    Thomas

  • Tomas
    • WPMU DEV Initiate

    Hey Thomas,

    Thanks that kinda worked. :slight_smile:

    Problem now is that when you scroll down (on desktop) and the menu rolls over, it kinda disappears in the colors and logo of the header, I’d love to fix that somehow. :slight_smile:

    Cheers,

    Tomas

  • Kasia Swiderska
    • Support nomad

    Hello Thomas,

    To avoid streaching image you would need to add those styles:

    .page-id-208 #headerwrap {
    background-size: contain;
    background-position: top center;
    }

    But – it will mean that image will be always in its original size and it will not cover whole header.

    For smaller size of the header there is no ideal solution to show logo when using it as header background.

    You can try this code, it will show full logo, but image will be much smaller

    .page-id-208 #headerwrap.fixed-header {
    background-size: contain;
    background-position: top left;
    }

    kind regards,

    Kasia

  • Nithin
    • Support Wizard

    Hi Tomas,

    Hope you are doing good today. :slight_smile:

    One final thing… How can I set it up so that when I scroll on desktop, the menu shows clearly instead of as on the screen shot…any advise?

    This is because, when you scroll the menu size shrinks up, and the image tries to fit into that size, hence you see the image shrinked up when you scroll. What you’ll have to do is upload a new image which has a size 1351px(width) X 58px(height), and then add that image using CSS, so that the new image gets displayed when you scroll.

    #pagewrap .fixed-header {
    background-image: url(http://yourWebsiteURL.com/new-image);
    }

    You’ll have to add the above CSS, so that the new image will be shown when you scroll. Please make sure to replace the image link in the above CSS. Would highly recommend that you make changes like this to a theme using a Child theme, so that it won’t be overwritten when you update your theme.

    I hope this helps. Please let us know how that goes, have a nice day. :slight_smile:

    Best Regards,

    Nithin

  • Thomas Tejeda
    • Flash Drive

    Hi Tomas,

    It looks like you just need to change your css selector to get it working. The following should work.

    .fixed-header-on #headerwrap {
    background-image: url(http://ustaxlienassociation.com/mmamt/free-course/wp-content/uploads/2017/03/css-header-thin.jpg);
    }

    Cheers!

    Thomas

  • Thomas Tejeda
    • Flash Drive

    Okay I see what’s happening. The .page-id-208 #headerwrap selector is overriding the .fixed-header-on #headerwrap selector. There are a few different ways that you can fix this. As long as it doesn’t cause any conflicts with any of the other pages I would suggest changing this:

    .page-id-208 #headerwrap {
    background-image: url(http://ustaxlienassociation.com/mmamt/free-course/wp-content/uploads/2017/03/USTLA-HEADER-MID.jpg);
    }

    to this:

    #headerwrap {
    background-image: url(http://ustaxlienassociation.com/mmamt/free-course/wp-content/uploads/2017/03/USTLA-HEADER-MID.jpg);
    }

    If that causes any other issues, then we can look into the other options.

    Hope this helps!

    Thomas

  • Nithin
    • Support Wizard

    Hi Tomas,

    Hope you are doing good today. :slight_smile:

    The CSS provided in the previous reply should have worked. If you are still having issues, could you please enable support access, so that I could give a closer look, and see what’s being missed here.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Please let us know once you enable access, so that we could get this sorted. Have a nice weekend. :slight_smile:

    Kind Regards,

    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.