Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 13, 2021 at 4:43 pm #1294171
    Eleina_Shinn

    Hi,

    I’m still having trouble creating a custom header using Enfold. I’ve gone through all of your documentation, none fits this exact scenario and, even if it did, I dont know which portions of the CSS or Code Snippets I am supposed to use. Is there any way you could create a video or clarify how to know what code to use? I get the how to add a header widget area, but not how to make it look nice and responsive.

    I have created my Widget Area for the Header and I have placed it on the left. I found some code elsewhere on this forum and placed htis CSS to get the button where I want it in your header:

    /*HEADER WIDGET STYLING*/
    #header .widget {
    width: 300px;
    position: absolute;
    top: 50px;
    transform: none;
    left: 95px;
    }

    However, it’s not responsive… on a tablet the button moves toward and overlaps the logo, on mobile it is completely behind the logo, whereas I think it should be stacked, the 3 header items should stack: logo, social icons, widget/button, something like that.

    Here are pictures of what it looks like on differnet screen sizes, because I have a coming soon page up:
    https://couragemecoaching.com/wp-content/uploads/2021/04/Widget-Left-Logo-Center-DESKTOP.jpg
    https://couragemecoaching.com/wp-content/uploads/2021/04/Widget-Left-Logo-Center-TABLET.jpg
    https://couragemecoaching.com/wp-content/uploads/2021/04/widget-Left-Logo-Center-MOBILE.jpg

    Bottom line is that it is so hard to make a custom header using Enfold and I end up choosing other themes because of it. Is there either some documentation that is more clear, or a video? Or will you be making a custom header page available like you have with footers? I LOVE Enfold and want to keep using it but I have to find a way to better understand how to customize the header – it has to be easy. Help!? and Thank you!!

    PS: One more question, is there a way for only the Menu to stick to the top, not the logo and social icons?

    • This topic was modified 3 years, 7 months ago by Eleina_Shinn.
    April 16, 2021 at 5:18 am #1294673
    Rikard

    Hi Eleina,

    Thanks for using Enfold. Since the placing of the widget is using an absolute position, it means that you sometimes have to use different values for different screen sizes. For that, you can use media queries in CSS.

    This will target tablet screens:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
#header .widget {
width: 300px;
position: absolute;
top: 50px;
transform: none;
left: 95px;
}
}

    And this will target mobile screen sizes:

    @media only screen and (max-width: 767px) {
#header .widget {
width: 300px;
position: absolute;
top: 50px;
transform: none;
left: 95px;
}
}

    Simply adjust the values in each media query, in order to place your widget in a different position.

    Best regards,
    Rikard

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