Robert Wattner
Forum Replies Created
-
Thank you. I’ve done this.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Blur Effect Not WorkingHi, this issue was just covered a few posts below. https://wordpress.org/support/topic/blur-on-scroll-goes-away-on-chrome/
In short, this is an elementor issue with backdrop filters such as blur, which my plugin uses. I’m sorry I can’t be of more help with this. Trust me, I share your frustration. I spent days diagnosing this only to find out it’s not just my plugin. Hopefully it’s fixed soon
- This reply was modified 4 years, 8 months ago by Robert Wattner.
Happy to help!
Hi, unfortunately this is an inherent problem with sticky headers in general. A Google search “sticky header overlapping content” will most likely return a result of adding equal padding and negative margin to the item with the link id# ex: padding-top:80px margin-top:-80px.
This solution is easy enough and works well on static pages, and even elementor, but I don’t prefer it. I recommend using elementor’s anchor link element placed at the top of a section. Set the position to absolute, align to top left, and adjust the top spacing as needed to get the page to land where you want. You can dial in all of your anchor links offset from top on all page sizes this way.
I hope this helps. I am looking into adding an anchor link offset feature for the pro version so help solve this.Is this the code you are using?
Here is the code to change the menu text color on scroll
/* TEXT */ .she-header .elementor-item, .she-header .elementor-item-anchor { color: #000000 !important; }Obviously, just change the #000000 to whatever color you like. RGBA(0,0,0,1) will work also if you would like transparency.
/* UNDERLINE */ .she-header .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after { background-color: #000000 !important; }/* OVERLINE */ .she-header .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before { background-color: #000000 !important; }/* DOUBLE LINE */ .she-header .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after, .she-header .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before { background-color: #000000 !important; }/* FRAMED */ .she-header .e--pointer-framed .elementor-item:before, .she-header .e--pointer-framed .elementor-item:after { border-color: #000000 !important; }/* BACKGROUND */ .she-header .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after { background-color: #000000 !important; }/* TEXT HOVER */ .she-header .elementor-item:hover, .she-header .elementor-item-anchor:hover { color: #000000 !important; }Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Blur on scroll goes away on Chrome@shipwreckdesign So while looking into this issue I have realized that it is an elementor issue. I disabled my plugin and applied the blur to several parts of a page and experienced the same problems.
Elementor is doing something weird with the backdrop filter CSS. It also seems to correspond with entrance animations for some reason. I will report this issue to their github and hopefully, it will be resolved soon.*I have marked this topic resolved as it is not an issue with the plugin.
Hi, sorry to hear you are having problems.
Do you have a link to the page so I can look myself?
Could you possibly share the code you are currently using to change the menu link color?
Are you using the elementor nav menu widget?Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Blur on scroll goes away on ChromeHi, yes I’ve recently noticed this weird behavior. After looking into this it turns out to be a known/open chromium bug. It’s an issue with nested divs using certain browsers. I’m looking into a few possible solutions right now and I will update the plugin when I’m confident I’ve found the best option.
Thanks for the input and sorry for the problems. Hopefully this won’t take too long to sort out.Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Logo shrink disappearingHappy to help
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Logo shrink disappearingHi, sorry for the delay, I was away from my computer last night.
Try this css.she-header img { width: 100px !important; height: auto; }Also, if you plan on keeping your header solid white, I would disable transparent header option and set scroll distance to 1px. That should keep the page from jumping after scrolling and keep the header at the top.
Let me know if this helps.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Logo shrink disappearingHi, I’d be happy to help. Do you have a link? Have you tried setting the logo shrink to a higher number? Are you using a regular image widget or the site logo widget?
If you could email me I will be able to help further. rwattner@gmail.com
The weather has cleared up and my internet is back on so I was able to take a better look.
Try this code. It can be placed anywhere you like.@media (max-width:767px) { .she-header .elementor-widget-image { display: none !important; } }Also, I noticed that setting the logo position to absolute, or using negative bottom margin to get the logo to extend below the header might help the header to not have to load full height before shrinking down. Just an idea. I can help with that as well if you like.
Let me know if this code works for you or if I can help with anything else
- This reply was modified 4 years, 9 months ago by Robert Wattner.
Hi, I can definitely help with this. Unfortunately I’m in south Houston that just got some bad weather and my internet is down. I’m replying on my phone right now but you could try adding this css to your logo custom css area
@media (max-width:768px;) { .she-header selector img { display: none !important; } }That code will keep everything else aligned/positioned the same. If you want other elements to act like it’s not there at all just remove the “img”. That will allow the menu to move all the way to the left with the “space between” horizontal column layout.
Let me know if that works for you. If not, I can take a look on my computer when my internet is working again. Hope this helps.
Forum: Plugins
In reply to: [Sticky Header Effects for Elementor] Why is my banner hide in the headerNo problem, simply select the header section and go to the advanced tab. Margin is the very first setting you will see. Make sure the chain icon on the far right is off so the values can be set independently. Nest you just set the bottom margin to -120px or whatever the height of your header is. If you go to the layout tab and set the minimum height then this will be easier to do. A minimum height of 120px needs -120px bottom margin etc.
Also, removing the vertical padding from the header section, columns, and all elements inside will help. Vertical padding can expand the header height past the minimum height setting which could make your negative margin inaccurate, creating unwanted gaps or overlapping. This also assures the header will be able to shrink after scrolling if you choose to enable that option. Use section/column vertical and horizontal alignment settings for positioning instead.I hope this helps