Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 1, 2015 at 9:43 pm #496726
    Donkies11

    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

    Sincerely,
    Greg

    September 2, 2015 at 6:39 am #496871
    Donkies11

    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)

    TIA,
    Greg

    September 2, 2015 at 2:29 pm #497119
    Ismael

    Hi!

    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. :)

    Regards,
    Ismael

    September 2, 2015 at 10:23 pm #497387
    Donkies11

    Hello Ismael,

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

    And thanks for the “props”. :-)

    Sincerely,
    Greg

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