Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 15, 2016 at 3:26 am #632416
    tremblayly

    Hi

    I have modified the height of the transparent glossy header to be 105px. Please refer to the screenshots to see that the height is not he same when on a 17monitor (laptop) and a 20″ monitor. How can I get this to be responsive?

    Here are screenshots:
    17″
    https://www.dropbox.com/s/6c6ukkz6o9c9r0c/glossy%20header%2017%20in%20laptop.jpg?dl=0

    20″
    https://www.dropbox.com/s/sj122xjcacbi2v4/glossy%20header%20on%2022%20in%20pc%20monitor.jpg?dl=0

    Here’s the link to the page:
    http://techweb.wpengine.com/sur-mes-pieds (hosted on WPengine)

    The site is under development and you will need to login and use password to view the site and the page. I have included the credentials in case you want to test it yourself.

    Thanks
    Lyse

    May 16, 2016 at 6:17 pm #633198
    Yigit

    Hi tremblayly!

    It seems like you set the height to 95px and it is the same on my end on both 15″ laptop screen and 1920x1200px screen. Have you figured it out already?

    Cheers!
    Yigit

    May 16, 2016 at 8:06 pm #633237
    tremblayly

    Hi Yigit,

    No, I have not figtured this out yet. The last setting was left at 95px but set to 105px on the PC it displays without overlapping the text below “Sur Mes Pieds”.

    Thanks

    Lyse

    May 18, 2016 at 10:15 am #634273
    Josue

    Hi,

    I checked on my end and it stayed 95px under all screens (1440, 1920, 2560). One thing you could try is using CSS to set the header size:

    header#header {
    max-height: 95px;
}

    Best regards,
    Josue

    May 18, 2016 at 3:38 pm #634560
    tremblayly

    Hi Josue,

    I’ve change the code as you suggested and fine tuned it to 92px. I still see a difference in the gap between the logo text and the glassy header, but I can live with that. At least the menu bottom border is more consistent.

    Thank you for your time and patience.

    Lyse

    May 18, 2016 at 7:46 pm #634747
    Vinay

    Hi,

    I confirm the header height remain the same on my end, please try to refresh the browser cache and review the site again.

    If you have any questions please feel free to get in touch with us :)

    Best regards,
    Vinay

    May 18, 2016 at 7:53 pm #634750
    tremblayly

    Hi Vinay,

    The header height remains the same, but perhaps its the image that make it appear differently because of the size of the screen. I see that the text logo is not in the same height position…

    Thanks
    Lyse

    May 18, 2016 at 11:57 pm #634825
    tremblayly

    Hi Vinay,

    While you are looking at this page again, can you see how I can stop the very top horizontal shrinking header from flashing so big when I start to scroll. I can figure where to stop this from happening and it’s pretty tricky to catch it.

    Thanks
    Lyse

    May 19, 2016 at 12:54 pm #635134
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #header_main {
    max-height: 92px;
}

    By the way, have you tried setting header height to 92px in Enfold theme options > Header?

    Best regards,
    Yigit

    May 19, 2016 at 6:08 pm #635376
    tremblayly

    Hi Yigit,

    That did not change the gap difference. I’ll accept the gap as is. I don’t want you guys to spend more of your precious time with this.

    Thank you all for your patience!

    Lyse

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Transparent & Glossy Header’ is closed to new replies.