-
AuthorPosts
-
October 20, 2016 at 5:16 pm #702001
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 pageAn 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, 1 month ago by digitalphilm.
October 21, 2016 at 8:04 am #702198Hi Phil,
Could you post a link to the site in question so that we can take a closer look please?
Regards,
RikardOctober 21, 2016 at 3:18 pm #702458I’ve provided (privately) links to the website I’m working on.
October 24, 2016 at 10:33 am #703185Hi,
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,
IsmaelFebruary 6, 2018 at 7:58 pm #908755Greetings!
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 #908758Or, maybe, there is a way to disable floating header on tablets resolutions?
February 7, 2018 at 7:09 am #908927Hi MAXENws,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardFebruary 7, 2018 at 4:22 pm #909249Hello!
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, 9 months ago by MAXENws.
February 8, 2018 at 4:34 am #909553Hi,
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,
IsmaelFebruary 8, 2018 at 11:07 am #909684This reply has been marked as private.February 8, 2018 at 1:35 pm #909756It 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 #910193Hi,
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,
IsmaelFebruary 9, 2018 at 12:03 pm #910220Hi.
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 -
AuthorPosts
- You must be logged in to reply to this topic.