Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 15, 2015 at 6:12 am #428700
    nokostudio

    I would like to use the sticky menu, but have the logo area scale to 0px height when the user scrolls the page, essentially getting rid of the logo area but retaining the horizontal menu (so that only the menu remains as ‘sticky’).

    Is this possible?

    Thanks!

    April 15, 2015 at 8:55 pm #429217
    Elliott

    Hi nokostudio!

    Add this to your custom CSS.

    .header-scrolled .logo {
  display: none;
}

    Best regards,
    Elliott

    April 15, 2015 at 10:14 pm #429258
    nokostudio

    Thanks Elliot!

    Almost does the job – now I just need to have the logo container scale to 0px height on scroll, so that the menu is at the top of the page without the empty logo area above it.

    Thanks!

    April 16, 2015 at 8:22 pm #429873
    Elliott

    Hi!

    I checked your site again but it looks different now and the header is no longer scrolling.

    Take a screenshot and highlight what your trying to do so we can get a better idea.

    Best regards,
    Elliott

    • This reply was modified 9 years ago by Elliott.
    April 17, 2015 at 12:25 am #430021
    nokostudio

    Hi Elliot

    Yes I deflected the sticky header as the site had to go live.

    I have put it back on temporarily.

    This is what I wanted to achieve (screenshots: https://www.dropbox.com/s/03qm4vcecflfm6l/default-menu-state.jpg?dl=0 and https://www.dropbox.com/s/ixdy80j2yf3jjtg/scrolled-menu.jpg?dl=0).

    Default menu is full logo and menu below.

    Scrolled state has the logo scaled to zero px height/width (including its container), with only the menu sticky at page top.

    Thanks for you help!

    Cheers

    April 17, 2015 at 8:10 pm #430588
    Elliott

    Hi!

    Try this out.

    .header-scrolled #header_main > .container {
  display: none;
}

    Best regards,
    Elliott

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