Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #496726

    Hello Support,

    I’d like to customize the homepage header. I want to start with a curved PNG image for the background – and then the logo shrinks and the background becomes a solid bar when user scrolls. I have two mock-ups as examples.

    This first sample shows the curved header. I believe this will be possible by making the PNG file transparent so it can lay on top of the main content (which I think the CSS already does).
    sample one

    This second sample shows the state of the header when someone scrolls – again, it seems the CSS is in place. I just need to understand where I am making the change(s).
    sample 2



    Hello Enfold Support,

    I have figured out most of the CSS for the goal. I/we are using the “Transparent & Glassy Header” and checked the boxes for “Sticky Header” and “Shrinking Header”.

    I have two current issues – after a little more work, I decided to do one issue at a time.
    So, the first issue – to work the menu into the curve of the PNG background, I moved it up a little.

    .main_menu {
        margin: -50px 0 0;
        text-transform: uppercase;

    Problem is, when I scroll the page and the header element collapses as it should, the menu moves off screen.

    How do I keep it on the page?

    (link, username and password in private content area)




    Thank you for using Enfold.

    You can try this in the Quick CSS field to fix the scrolled menu:

    .html_header_top.html_main_nav_header #top .header-scrolled .main_menu {
        top: 55px;

    Pretty nice modification. :)



    Hello Ismael,

    Thanks; that did the trick! (I have some responsive work to do now…)

    And thanks for the “props”. :-)


Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘customize homepage header’ is closed to new replies.