Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 28, 2022 at 2:08 pm #1356725
    fanlokbun

    Hi I am building a site that needs a full width header image. To achieve this I have used a background image. Obviously this does not work on mobile devices. Is there a way to have a different header with logo and burger menu for mobile devices? Or is there a better way of doing it?
    Thanks

    June 29, 2022 at 8:12 am #1356800
    Guenni007

    Can you please describe in more detail how you want the header to look on small screens (or mobile devices)?
    Do you want the header to stay fixed at the top? Do you want the header to shrink after scrolling, etc.? Maybe you can show a sketch.
    you can see here a testpage where the header is still fixed on top – and i think it will be no problem to give to the header_bg a background-image after scroll: https://webers-testseite.de/

    June 29, 2022 at 11:50 am #1356838
    fanlokbun

    Hi Guenni007
    I don’t need it fixed or to shrink. The mobile menu would just be a small logo (340px * 156px) and burger menu like if I’d set up Enfold normally.
    Thanks

    June 29, 2022 at 11:54 am #1356839
    fanlokbun

    … by the way, to stop the enfold logo appearing over the top of the background I have added a transparent png to the Theme Options – Logo. This is probably not the way to do it and might alter your solution.

    July 2, 2022 at 6:17 am #1357034
    Nikko

    Hi fanlokbun,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    .responsive #top .header_bg {
    background-size: contain;
}

@media only screen and (max-width:767px) {
  .responsive #top .header_bg {
    background-position: center;
  }
}

    Best regards,
    Nikko

    July 3, 2022 at 11:47 am #1357116
    fanlokbun

    That sort of works but is it possible to change the image at the point the burger menu appears 989px. On a phone it sits over the graphic on the right. The URL of the image I would like to use is below.
    Thanks

    July 3, 2022 at 7:08 pm #1357146
    Mike

    Hi,
    Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 989px) { 
	#top #header.header_color .header_bg {
    background: #ffffff url(/staging/wp-content/uploads/2022/07/Calcott-Construction-Header-Mobile.png) top left no-repeat scroll;
    background-size: contain;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 4, 2022 at 10:03 am #1357178
    fanlokbun

    Yes that works thanks very much.

    July 4, 2022 at 12:03 pm #1357186
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Different header mobile’ is closed to new replies.