Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 20, 2016 at 5:16 pm #702001
    digitalphilm

    Good morning!

    I am fairly certain this is not currently implemented functionality, but am looking to see if the existing sticky header code can be re-purposed to achieve the following:

    – In the “Logo Left; Menu Below” header layout, both the logo area and the menu bar below it are stickied to the top of the window
    – I would like to have both of these items scroll with the page, but the menu would stick to the top of the page

    An example of a theme that performs what I’m looking for, is the Sport theme by ThemeCanon. Here is a link to a demo site of theirs (hopefully it links properly): http://bit.ly/2ep8Kx0

    I am comfortable with Javascript, PHP and CSS, and will be looking to solve this on my own, but any knowledge/assistance from the Kriesi devs would be more than welcome.

    Thank you from Canada :)

    • This topic was modified 8 years, 2 months ago by digitalphilm.
    October 21, 2016 at 8:04 am #702198
    Rikard

    Hi Phil,

    Could you post a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    October 21, 2016 at 3:18 pm #702458
    digitalphilm

    I’ve provided (privately) links to the website I’m working on.

    October 24, 2016 at 10:33 am #703185
    Ismael

    Hi,

    Please enable the “Shrinking Header” option in the Enfold > Header > Header Behavior panel. And then add the following css code.

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

    I know that you don’t need a shrinking header but turning that option will enable us to use a custom class attribute called “header-scrolled” which is added to the header container on scroll.

    Best regards,
    Ismael

    February 6, 2018 at 7:58 pm #908755
    MAXENws

    Greetings!
    Code works on desktop, but logo still showing on tablets. Is there some solution to hide logo area on them?

    February 6, 2018 at 8:00 pm #908758
    MAXENws

    Or, maybe, there is a way to disable floating header on tablets resolutions?

    February 7, 2018 at 7:09 am #908927
    Rikard

    Hi MAXENws,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    February 7, 2018 at 4:22 pm #909249
    MAXENws

    Hello!
    Current project in development state: http://dev.plittorg.in.ua/

    As you see, in higher resolutions everything working nice, but when you look at it with, shall we say, iPad resolution, we see that logo area and widgets in it isnt hiding (just dont forget to reload the page after switching to iPad resolution in browser).

    Code I use:

    .header-scrolled #header_main .av-logo-container, .header-scrolled div#search-3, .header-scrolled div#text-2, .header-scrolled div#text-3 {
    display: none!important;}

    What I need is to make logo area hide aswell on tablets resolutions, or disable floating header only for them.

    • This reply was modified 6 years, 10 months ago by MAXENws.
    February 8, 2018 at 4:34 am #909553
    Ismael

    Hi,

    The header is not sticky or fixed. Did you disable the option? Please post the login details in the private field so that we can inspect it.

    Best regards,
    Ismael

    February 8, 2018 at 11:07 am #909684
    MAXENws
    This reply has been marked as private.
    February 8, 2018 at 1:35 pm #909756
    MAXENws

    It seems like .header-scrolled isnt the right property for tablets resolution. It just don`t make any effect on tablets after you refresh the page.
    I suppose, if you tell me what property makes sub menu hide on tablets in css I will manage to make it work properly.

    February 9, 2018 at 11:11 am #910193
    Ismael

    Hi,

    Why do you need to hide the logo on scroll? The header is not fixed or sticky on mobile devices so users won’t be able to see the logo on scroll.

    Best regards,
    Ismael

    February 9, 2018 at 12:03 pm #910220
    MAXENws

    Hi.
    I see you just didnt look at site on tablet resolution. There is link for screenshot: https://drive.google.com/open?id=12YB2mhm7SL5Ou7hQBnCZ317RJLZa_X-i And than is only reason I need to hide logo on scroll on tablets.

    February 12, 2018 at 2:36 am #910869
    Ismael

    Hi,

    Yes, that’s how it looks on iPad view but the header is not fixed or sticky. If you really want to remove the logo, use this.

    @media only screen and (max-width: 1024px) {
    #header_main .av-logo-container {
        display: none;
    }
}

    Best regards,
    Ismael

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