Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 5, 2015 at 1:45 pm #455078
    Linden_Mobile

    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

    June 5, 2015 at 2:50 pm #455097
    Yigit

    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

    June 5, 2015 at 4:26 pm #455153
    Linden_Mobile

    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.

    June 7, 2015 at 6:55 am #455584
    Ismael

    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

    June 9, 2015 at 2:53 pm #456741
    Linden_Mobile

    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!

    June 10, 2015 at 6:07 pm #457439
    Andy

    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

    June 11, 2015 at 9:28 am #457672
    Linden_Mobile

    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

    June 12, 2015 at 4:33 pm #458473
    Andy

    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

    June 15, 2015 at 9:24 am #459172
    Linden_Mobile

    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?

    June 16, 2015 at 4:05 pm #460109
    Andy

    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

    June 16, 2015 at 4:38 pm #460139
    Linden_Mobile

    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.

    June 16, 2015 at 6:36 pm #460266
    Andy

    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

    June 17, 2015 at 9:36 am #460603
    Linden_Mobile

    Thanks, I found out what I did wrong.

    June 17, 2015 at 12:59 pm #460689
    Andy

    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

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