Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #455078

    Hey,

    I am building a new website where their needs to be an image above the menu.
    It should be like this site: http://oorlogsliefdekind.nl/

    How can you do this?

    Best regards

    #455097

    Hi Linden_Mobile!

    You can choose to display “logo left, menu below” option in Enfold theme options > Header and set a custom background image for your header in Enfold theme options > General Styling tab

    Cheers!
    Yigit

    #455153

    Thank you,

    It worked.

    Just one problem. The header looks horrible when the screen is smaller (for instance on a mobile).

    How can I make it that the background image will be smaller and also will be fully visible on mobiles and tablets?

    Best regards.

    #455584

    Hi!

    You can create a background image specifically for mobile device then set it in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    .header_color .header_bg {
      background: #f1f1f1 url(//lindenmobileappstore.nl/ERI/wp-content/uploads/2015/06/new-header-image-here.jpg) top left no-repeat fixed !important;
    }}

    Adjust the image url. Or much better, IMO, hide it on mobile devices:

    @media only screen and (max-width: 767px) {
    .header_color .header_bg {
      background: none !important;
    }}

    Regards,
    Ismael

    #456741

    Hey,

    That helped but it is not exactly how I want it.

    The header needs to be centered in the middle middle. I tried to change things in de css but I don’t see any changes, or when it changes it doesn’t change the right way.

    I made a different header for a mobile and I will make a different one for tablets.

    I also would like to see the whole image at once.

    Hope you can help, with regards!

    #457439

    Hi!

    quite difficult to imagine what you really need. Could you please send us a screenshot/mockup showing which result you want to achieve? you can use imgur.com or dropbox.

    Regards,
    Andy

    #457672

    Hi,

    I quickly made a mock-up. I hope it is now more clear what I mean.

    https://www.dropbox.com/s/2cff0rpdaqs0hw2/mock-up%20website.png?dl=0

    Best regards

    #458473

    Hi!

    thanks for the mockup, I see what you mean now. Please add this code into your Quick CSS field:

    .header_color .header_bg {
    background-size: 100% 63%;
    }
    

    and adjust as needed.

    Best regards,
    Andy

    #459172

    Hi,

    Thanks, it looks way better, but it is still not finished.

    When I look on a smaller screen like a tablet or smartphone it is way to much out of ratio.

    How can I repair this?

    #460109

    Hi!

    just use media querries for mobile and play around with the values. For example for iPhone:

    @media only screen and (max-width: 767px) {
    .header_color .header_bg {
    background-size: 100% 13%;
    }}
    

    adjust as needed.

    Regards,
    Andy

    #460139

    Hey,

    Thanks, I tried it. On a phone it looks now perfect.

    But on a iPad it looks horrible. Can you help me fix this. Here are the links to screenshots of the ipad and the CSS.

    We are now in a hurry because the books is going to be published next week.

    https://www.dropbox.com/s/o2rsaap2vsmppgx/IMG_0012.jpg?dl=0

    https://www.dropbox.com/s/1i75j6kcd4ux8t3/IMG_0013.jpg?dl=0

    https://www.dropbox.com/s/ku699fw1a4aa6df/Schermafbeelding%202015-06-16%20om%2016.31.21.png?dl=0

    Thanks and best regards.

    #460266

    Hey!

    it would be great if you would do it by yourself. As I already told you, you just need to adjust my code as needed. So basically you would just need to change the (max-width) value. For iPad it would be something like:

    @media only screen and (max-device-width: 1024px) {
    .header_color .header_bg {
    background-size: 100% 13%;
    }}
    

    Play around with the different values until you find what fits to you. For more information about media queries check out this link:
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    You could also hire a freelancer for customizations.

    Regards,
    Andy

    #460603

    Thanks, I found out what I did wrong.

    #460689

    Hey!

    glad you did it. Let us know when you need have some more questions or issues related to the theme. We are happy to assist.

    Best regards,
    Andy

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Full image header on top off menu’ is closed to new replies.