Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 8, 2022 at 11:58 am #1343596
    Jak73

    Hi,

    i would like to add some images into my header and link them. The header alone looks so empty at the moment.

    I made a screenshot, to show what i mean.

    How can i do that?

    Kind regards

    Jak

    March 8, 2022 at 2:59 pm #1343646
    Rikard

    Hey Jak73,

    You can add content to your header in a widget for example: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Rikard

    March 8, 2022 at 3:33 pm #1343652
    Jak73

    Hi Rikard,

    i added the code to fuctions.php and added a “header” and a “header2” widget in the widget area. But the widget “header” in behind my logo now. The second widget “header2” is not there.
    Could you provide me with instructions, how to do this, please. As i’m not a coder and i try, what i can, but i think i really need help, to get this done.

    Kind regards Jak

    March 8, 2022 at 4:25 pm #1343668
    Yigit

    Hey Jak,

    It seems like you have removed widgets from your header area. Could you please add them again and let us know so we can look into it?

    Regards,
    Yigit

    March 8, 2022 at 4:30 pm #1343671
    Jak73

    Hi Yigit,
    thanks for your help!!!
    I just added the image to the header widget. Function.php code has been added and css to quick css.

    What should i do next, please?

    kind regards Jak

    March 8, 2022 at 4:39 pm #1343677
    Yigit

    Hey Jak,

    You can add following code to Quick CSS field in Enfold theme options > General Styling tab to center the image in your header 

    
#top #header #header_main .widget {
  max-width: 400px;
  margin: auto;
}

    Regards,
    Yigit

    March 8, 2022 at 4:48 pm #1343685
    Jak73

    Hi Yigit,

    thanks! This seems to work for desktop. How can i make it work in responsive modes?
    Is it possible to place it more to left, so it does look a bit more clutter?

    kind regards
    Jak

    March 8, 2022 at 4:59 pm #1343688
    Yigit

    Hi Jak,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab and adjust “left” and “max-width” values 

    
@media only screen and (max-width: 767px) { 
#top #header #header_main .widget {
  max-width: 200px;
  top: 0;
  position: absolute;
  left: 40%;
}}

    Regards,
    Yigit

    March 8, 2022 at 5:23 pm #1343697
    Jak73

    Hi Yigit, still having issues in responsive mode for horizontal and vertical view.

    In horizonla view widget image is conflicting with burger menu image.

    In horizontal and vertical view there is to less space to content below?

    How can i fix it?

    kind regards Jak

    March 8, 2022 at 5:32 pm #1343702
    Yigit

    Hey,

    Since there is not enough space on mobile, I would recommend you to hide the image on screens below 480px and move it a bit higher on landscape mode

    /* Move the image higher */
@media only screen and (max-width: 767px) { 
#top #header #header_main .widget {
  top: -20px;
}}
/* Hide below 480px */ 
@media only screen and (max-width: 480px) { 
#top #header #header_main .widget {
  display: none;
}}

    Cheers!
    Yigit

    March 8, 2022 at 5:39 pm #1343705
    Jak73

    Hi Yigit,
    yes, this works great! Is it possible to make use a different image with more width in desktop mode?
    Can we move the image a little bit down in desktop mode, please?

    How can i link the widget image?

    Kind regards Jak

    March 10, 2022 at 3:22 pm #1344016
    Yigit

    Hi,

    1- You can adjust “max-width” value in this code I posted to display a larger image – https://kriesi.at/support/topic/linked-images-in-header/#post-1343677.
    If you would like to display a different image, you can add custom class to your images as following

    <img class="header-image" src="..." />
<img class="header-image-mobile" src="..." />

    and then add following code to Quick CSS

    
@media only screen and (min-width: 990px) { 
.header-image-mobile { display: none;} 
}
@media only screen and (max-width: 989px) { 
.header-image { display: none; }
.header-image-mobile { display: block; } 
}

    2- Please add following code to Quick CSS field in Enfold theme options > General Styling tab and adjust as needed

    
@media only screen and (min-width: 990px) { 
#top #header #header_main .widget {
  top: 10px;
}}

    3- You can wrap your image inside HTML A tag as following

    

<a href="https://kriesi.at" target="blank"><img src="https://kriesi.at/wp-content/themes/kriesi/images/logo.png" class="header-image"></a>

    Best regards,
    Yigit

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