Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 23, 2022 at 11:03 pm #1352682
    HulaSlim

    Dear Team,
    I have been looking in vain for a solution on how to use the transparent header to make the logo much more visible than it actually is, and make the menu bar visible while scrolling down.
    Could you suggest some examples of how others manage this ?
    Thank you so much.

    May 24, 2022 at 4:43 am #1352699
    Nikko

    Hey HulaSlim,

    Please go to Enfold > Header > Header Behavior (tab) and check Sticky Header and Shrinking Header.
    If you don’t like shrinking the header, then please keep it enabled and then add this CSS code in Enfold > General Styling > Quick CSS:

    #top #header .av-logo-container, 
#top #header .menu-item-top-level > a {
    height: 88px !important;
    line-height: 88px !important;
}

#top #header .logo a, 
#top #header .logo img {
    max-height: 88px !important;
}

    And edit the page and set Header visibility and transparency to Transparent Header.
    Hope this helps.

    Best regards,
    Nikko

    May 24, 2022 at 5:25 am #1352705
    HulaSlim

    Hi Nikko,
    Thank you so much for your answer.
    Actually yes, I would like to make it shrinking so smaller while scrolling, but what I would like is a kind of way in between, i.e. a transparent header to allow a full page slide-show and a visible (white) menu bar which is no longer transparent while scrolling. Does this exist ? Does this CSS adding that you advise allow this ?
    Thanks again,
    Natacha

    May 24, 2022 at 5:50 am #1352710
    Nikko

    Hi Natacha,

    Yes that’s possible, just follow the instructions I gave and just skip the part where I instructed to add the CSS code.

    Best regards,
    Nikko

    May 24, 2022 at 8:14 pm #1352816
    HulaSlim
    This reply has been marked as private.
    May 25, 2022 at 2:41 am #1352836
    HulaSlim
    This reply has been marked as private.
    May 25, 2022 at 5:00 am #1352842
    Nikko

    Hi HulaSlim,

    Thanks for giving us admin access.
    The issue you were having was that the special heading had a left and right margin of 160px, I have removed it and it’s now centered.
    I also changed the header so the header background is completely transparent, the pages I made changes to are listed in private content.

    Best regards,
    Nikko

    May 25, 2022 at 11:58 pm #1352987
    HulaSlim

    Waaw !
    Thank you very much. I like it.
    Thank you also for the explanation about the margin. Next time it happens I will be able to think about it.
    Cheers,
    Natacha

    May 26, 2022 at 2:04 pm #1353051
    Mike

    Hi,
    Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Which logo solution on a transparent header ?’ is closed to new replies.