Great video, thank-you. You don't need custom CSS. When selecting the ANCHOR Widget... go to the ADVANCED tab and at the top is MARGIN and PADDING. Set the TOP MARGIN to ... -100.. or whatever you need.. and the bottom,left, right margins to 0. That should also work.
@herbslebmedia6638
9 ай бұрын
Why would you use negative Top-Margin? Totally stupid since it pushes your content upwards, not down. So it´ll be covered by the sticky header.
@Chapper123
9 ай бұрын
@@herbslebmedia6638 Just add the same amount of spacing to padding-top.
@moneyfflow
8 ай бұрын
Nice yes this is working. Im using custom header and with -140px margin top on anchor, the header will not cover the title of the section :)
@abhinaypatil67
5 ай бұрын
Thanks a ton!!! Imran's content is golden needless to say but this solution did not seem to work but yours did.
@user-bk4ow7ur1f
12 күн бұрын
Thank you, your method works very well. I was struggling with anchors for a long time. You helped a lot
@angelabowman7844
11 ай бұрын
Super helpful! Now we just need to get Elementor to make menu anchors accessible, since they currently do not pass accessibility standards because they do not bring focus to the area they navigate to.
@clintongallagher
2 жыл бұрын
Elementor renames stuff such as Menu Anchors that have been around Day One. We used to call them "jump tags" until they were formalized by the W3C that named them "Fragment Identifiers" Do yourself a favor after watching this fine tutorial and ask Professor Google about Fragment Identifiers. Learning to offset will be mandatory as the need is explained herein. If you do this stuff manually which is just as easy you'll be using the spacer widget. If you consult with Professor Google as I advise you will learn to use Fragment Identifiers to --*return*-- to the place you jumped from. That's not covered in this video but implementing a return is also easy once you get a clue...
@websquadron
2 жыл бұрын
Neat stuff
@stevieoftheg
2 жыл бұрын
Thanks very much: you explained how to fix sticky header offset issues really well, and now my site looks much better!
@emilitovaldes
Жыл бұрын
I've added something else to your solution using one of the new features as of elementor 3.12 Step 1: Apply the Anchor Menu Widget to any post. Step 2: Apply a css class to it, for example, "correct_height_menu_ancla", Step 3: Right click on the widget and click on "Save as default" (as of version 3.12 or 3.14, I don't remember), this makes the "Anlca Menu" widget of elementor always have the css class applied . Step 4: Create a css rule in the global styles with the code you have provided in this video. This is how we achieve that whenever the "Alcla Menu" widget is applied, it behaves in the same way, respecting height and preventing it from hiding behind the web header. This avoids having to add the css rule each time we use the widget. Greetings Note: I have added the comment in Spanish since it is my native language and in case it can help someone from the Spanish-speaking community. He agregado algo más a tu solución utilizando una de las nuevas funciones a partir de elementor 3.12 Paso 1: Aplicar el Widget Menu ancla en cualquier entrada. Paso 2: Aplicarle una clase css, por ejemplo, "corregir_altura_menu_ancla", Paso 3: Clic derecho sobre el widget y hacer clic sobre "Save as defaul" (a partir de la versión 3.12 o 3.14, no lo recuerdo), esto hace que el widget "Menu de anlca" de elementor siempre tenga aplicada la clase css. Paso 4: Crear una regla css en los estilos globales con el código que has ofrecido en este vídeo. Asi logramos que siempre que aplique el widget "Menu de alcla" se comporte de la misma manera respetando altura y evitando que se oculte trás el header de la web. Esto evita tener que agregar la regla css cada vez que utilicemos el widget. Saludos
@websquadron
Жыл бұрын
Big thanks for that.
@KhaelaMenshaK
Жыл бұрын
omg thanks. i couldn't figure it out. found some page indicating scroll-margin-top should be used when you're jumping to anchors on the same page with a sticky header, but that for some reason didnt work for me. but with your display:block; position: relative; top: -175px; in my case, it works like a bloody charm!!
@ehteshxm
10 ай бұрын
The elementor sticky header code was a big help. Thank you.
@DoomFinger511
Жыл бұрын
@7:30 is where the solution is. Thanks this was helpful!
@mahbubjubayer9453
2 жыл бұрын
getting help from your videos is solving most of my problems.. Bless you mate
@websquadron
2 жыл бұрын
Awesome!
@chibbledorf
2 жыл бұрын
My favourite way of using a menu now is to make it sticky top, but as soon as the person starts scrolling down, it disappears so they can see the entire content without anything else taking up "real estate". But... If they start to scroll up, the menu immediately re-appears, so they can click whatever menu link they want from there, without having to scroll right up to the top. It's only a small thing, but I think it's really good for user experience. I saw it being used on a site and thought, hmm that's a good idea. Won't be to everyones taste though 😁
@websquadron
2 жыл бұрын
Indeed yes. The soft reveal back again isn't a bad experience :)
@chibbledorf
2 жыл бұрын
@@websquadron I didn't realise it had a name 🤣
@rswebmarketing
Жыл бұрын
Thanks for the video. I found a solution with no code to add : just adding negative margin in the anchor widget.
@sergiofermin5482
10 ай бұрын
Nice! Thank you!!
@zetaequis_tv
Жыл бұрын
GREAT!!!! you saved me!! greetings and 1000 thanks from Spain
@longcovidwarrior
Жыл бұрын
You legend! I was struggling with the placement of anchors on a links from another page xxx
@GrahamClements
Ай бұрын
When I put anchors in and add them to the menu, I have a problem that the header or menu becomes unformated on an ipad when I go straight to the anchored text. Sometimes the header only covers 75% or so of the screen and is the hamburger. Other times it reverts to smaller text, with highlighted dark backgrounds, sometimes the menu items are jumbled about. I have tried everything to fix this and finally gave up on have menu anchors. I tried with html anchors, I tried with different them, I tried with different headers. I tried changing the tablet breakpoint.
@websquadron
Ай бұрын
Hmmmmm, that does sound odd.
@GrahamClements
Ай бұрын
@@websquadron My theory at the moment is that I had too many moving objects, i.e. images, headings, and text blocks fading in, which somehow confused the pinned-to-top menu, but this only really became noticeable when using the anchor links in the menu. And only on iPad. No probs on an iPhone. I have had problems before with the anchor widget on ipads and iphones. So, I have given up on anchors being sub-menu items, and I am using buttons. Not a tremendous solution but it does the job.
@lady-lizzy
Ай бұрын
I have a question, I'm finding the anchor glitches when its scrolling to the spot and doesn't hit the correct position on mobile. Desktop it scrolls to the spot correctly, but mobile, it glitches and falls short of the correct spot. Any advise?
@websquadron
Ай бұрын
Is it going past or before? An alternate method is to add the anchor name to the CSS ID of the element rather than a Menu Anchor widget.
@mtnpfi
4 ай бұрын
Is there any way to modify this for responsive? Because the when I target the anchor links on tablet for example, it jumps to a different height - the anchor link is almost hidden again, whilst perfect on desktop. You mentioned somewhere further down: "That's when you use the @media CSS Code - so make a copy and add this: @media screen and (min-width: 480px) { ADD THE MODIFIED CODE HERE } I am unsure where to place this exactly.. Add it to the css section of the anchor widget? I also tried changing padding or margins of the anchor widget, but it does not make an any difference. Thx!
@websquadron
4 ай бұрын
Add this to the CSS for the anchor.
@carer7259
7 ай бұрын
I loved your video and used it a few months ago to set up my sticky header and anchors. I recently decided to remove the header on the mobile view and now the anchor offsets don't work on mobile. They jump to the anchor but it's way off the mark. I've tried media queries but they aren't having the expected effect. Below is the code I'm using, what am I doing wrong, please? @media screen and (max-width: 479px) { #anchorID{ display: block; position: relative; top: 0vh; } } @media screen and (min-width: 480px) { #anchorID{ display: block; position: relative; top: -15vh; } }
@Alex-nn4qz
2 жыл бұрын
Intrigued how you do this with anchor points added to section CSS IDs rather than using the anchor widget...
@websquadron
2 жыл бұрын
Not sure that would work :)
@visualess4603
Жыл бұрын
This has worked amazingly. I'm having one issue - I have a sticky header with the menu anchors in. I've used that CSS code which works perfectly for the placement of one anchor position (on a one-pager) how do I get this to work for the other links in the menu?
@websquadron
Жыл бұрын
Can you clarify what you mean by working with other links in te menu?
11 ай бұрын
Thank you for this video, it helped me a lot to understand how anchors work with stickyness! But what happens when the section above the mentioned anchor has a Toggle or Accordion widget? I'm now facing a problem with that because the toggle/accordion size is not fix, it depends on the content and because of that the anchor goes to the wrong place of the page. One other problem is that in the nav menu, the currently active section shows correctly only if all the accordions are closed, once one is open, the anchor somehow goes behind the opened accordion and the menu will lit up on the wrong section of the webpage. It is strange since the content is pushed down when you open an accordion but somehow the anchor is not. Is this a bug or this can also be solved somehow?
@websquadron
11 ай бұрын
Tricky without seeing it to be sure of possible solutions. The accordion above could be a pain unless you split it so that it sits in its own container
@UncleBillyProduction
11 ай бұрын
Thanks so much for taking the time to make this. Your presentation manner is very engaging. Unfortunately it did not help my situation because I have multiple vertical sections (anchors). So based on the url, I jump to 1 of 9 sections. What your code does is move the 1 section with the target anchor up which moves, for example, anchor section 3 overlayed onto anchor section 2. Do you have thoughts on handling that?
@websquadron
11 ай бұрын
It shouldn’t move - can you share a url and tell me where the anchors are on that page?
@UncleBillyProduction
11 ай бұрын
@@websquadron Thanks for the quick reply. I re-watched the video and then did a deep dig into the page code. I found some rogue anchor tags with the same names as I used from places I had inserted in element's advanced CSS_ID field. Once I cleared those out, this worked like a charm. (Weird that it seemded when the same anchors were defined in the Elementor "CSS_ID" field, the custom css code would move the elements up in as I typed the negative value for "top".)
@karlkaczmarczyk
2 жыл бұрын
Thanks heaps for your video it was a great help. I was testing this with a sticky header and used the example code you had suggested. I have a parent menu with sub menus that link to anchored text From an external page - the anchor links work perfectly, but if you click on one of those sub menu anchor links from the actual page that those links are on, it doesn't scroll to the correct position. Is there any way around this - thanks in advance
@websquadron
2 жыл бұрын
In that scenario, you could have an alternate anchor though that means having an alternate header for that page.
@karlkaczmarczyk1768
2 жыл бұрын
@@websquadron Thanks - I didn't think of that! Great idea thanks again
@publinachox
Жыл бұрын
Thank you for your video. I have a question and I hope you can help me. Whenever I click on the anchor link for the first time, it shows me the wrong anchor (the previous one, or at least it appears that way). However, after clicking the link again, it jumps to the proper anchor point. I dounf in some forum that it could be because the first time the site is loaded, the browser doesnt "know" that the header is sticky, but I dont know...
@websquadron
Жыл бұрын
That does sound odd unless there's other css codes causing momentary conflict.
@ms-webdesign
11 ай бұрын
the problem is, that this offset is good for desktop version ist is too much. so i have to duplicate the anchor and do it seperate for mobile
@websquadron
11 ай бұрын
Mine works fine for mobile. Are you using @media to specify width size to have an alternate in the code ?
@ms-webdesign
11 ай бұрын
i use this code works well and i have to define it only once body:not(.elementor-editor-active) .elementor-widget-menu-anchor { position: relative; z-index: -1; } body:not(.elementor-editor-active) .elementor-menu-anchor:before { content: ""; display: block; height: 100px; // fixed header height margin: -100px 0 0; // negative fixed header height visibility: hidden; pointer-events: none; }
@amrfarrouh
2 жыл бұрын
Thank you I was searching for this, nice Tut
@websquadron
2 жыл бұрын
Glad I could help
@TheNaturalEnquirer
Жыл бұрын
Thank you for this tutorial which I've used to link to specific headigs, etc. Is there a way to do this for links in Elementor's table of contents widget?
@websquadron
Жыл бұрын
I think... If the H3 used for the Table of Contents is: Header Name Then you could use #headername in the link.... I think....
@TheNaturalEnquirer
Жыл бұрын
@@websquadron Thanks! May not be best way, but what worked for me was using: selector .elementor-menu-anchor
@iJairGalindo
2 жыл бұрын
What about with a responsive header with different heigths? For example on desktop and mobile. The CSS worked great for desktop, but on mobile needs a different value.
@websquadron
2 жыл бұрын
That's when you use the @media CSS Code - so make a copy and add this: @media screen and (min-width: 480px) { ADD THE MODIFIED CODE HERE }
@ThatGuyBarrold
2 жыл бұрын
Any ides on how to add an offset if I set the anchors via CCS ID instead of adding that extra elementor anchor widget? Thanks in advance.
@websquadron
2 жыл бұрын
Should be able to but I've not tried that.
@walterjohnson8192
Жыл бұрын
If I have a sticky header on my entire site, is there a way to apply this to all anchor tags so I don't have to add the custom CSS to every single anchor tag that I create? Thanks for your great videos!
@websquadron
Жыл бұрын
You could add a Class Name to the Anchor and then try applying the css once. It should then repeat on all.
@syednadeemmuhammed5675
2 жыл бұрын
I need to offset all the menu anchors to 10vh, as my header height is set to 10vh. But I am so far unable to do it in a simple manner. I don't want to keep adding custom css each time I add a menu anchor. Please help. I tried adding css code to the global custom css, but not working as expected.
@websquadron
2 жыл бұрын
You need to add a class name to the menu anchor and then add the css to that class name once and it will repeat for all others
@alandeskbusinessinteriors
10 ай бұрын
Hello, when I do this, it goes past the anchor =(
@websquadron
10 ай бұрын
Do you have a sticky header?
@alandeskbusinessinteriors
10 ай бұрын
I don't. Also I made sure I don't have smooth scrolling. It could be the theme that is causing this. @@websquadron
@Dimizdomu
2 ай бұрын
Is there any difference between Menu Anchors and CSS ID??
@websquadron
2 ай бұрын
CSS ID saves you using a separate anchor widget
@Dimizdomu
2 ай бұрын
@@websquadron That´s what I thought, thank you! By the way, anytime I need to solve a problem, no matter how stupid it is, you videos popup! You´re the GOAT and thankfull for the help!
@benjaminroot6270
Жыл бұрын
Did Elementor recently fix this conflict? I went in to apply this CSS and it ended up NOT being necessary. Hmmm.
@websquadron
Жыл бұрын
I still have to put it in. But will probe a little more.
@elnicolino
Жыл бұрын
Hi Imran, nice video as usual. Just to know is there a diffeence between using anchor widget or name css id of the element where you need to auto scroll ? Cause i used to add anchor widget but now i always name CSS ID with the anchor name i want.
@websquadron
Жыл бұрын
I don't think there is.... I think
@kova_zg
Жыл бұрын
Hello, thanks for this idea, but I got a question, what if we need both? I mean if we have same menu, it has same page + other page anchors, then we have a "bug", for the same page we are too high for a offset, and from other pages we go to correct stpot, because of a sticky header. How to make it work both ways?
@websquadron
Жыл бұрын
Let me check but it should work either way.
@MarkusJue
2 жыл бұрын
Thanks for your great and helpful videos!!! Mostly a game changer! Isn't it the same to give a section a classname instead of inserting menu anchors. So what's the advantage or the difference?
@websquadron
2 жыл бұрын
I find by adding the menu anchor it’s more focused to the point that you want them to arrive at.
@MarkusJue
2 жыл бұрын
@@websquadron Thank You!
@peacetoall1858
2 жыл бұрын
Learned something useful. Thanks
@websquadron
2 жыл бұрын
The Offset for Menu Anchors can be so important :)
@nomer9998
2 жыл бұрын
Hello! The scroll to the anchor link does not work correctly for me. He is very much mistaken. This happens at the first click, then it works fine. Maybe you have met this problem?
@websquadron
2 жыл бұрын
It works fine for me each time. Have you got any optimisation plugins added?
@nomer9998
2 жыл бұрын
@@websquadron Yes! Wp-rocket. What scripts are responsible for scrolling?
@websquadron
2 жыл бұрын
@@nomer9998 Could be any of the Javascript settings as the scroll speed for Menu Anchors is affected by Javascript. You may need to contact WPRocket. I would prevent any JS from being aggregated or combined. JS minified is fine.
@nomer9998
2 жыл бұрын
@@websquadron Thanks! I read that this is due to lazy loading of images
@warblog6165
2 жыл бұрын
I came to this video through a query off Facebook Group - my problems relates to a url + #text - with a sticky menu - how do I adjust if I have 5 plus anchors on the page - can't get my head around that? Can you help?
@websquadron
2 жыл бұрын
Hi. If you use the code I mention and ensure that you add the same pixel for all of them (based on how big your header is in height) then you'll be fine.
@@websquadron holy moly this is epic! Thanks for showing!
@plant_music
Жыл бұрын
Hey, you seem to know all of the hacks so I have a question, my main site menu keeps going behind my first website section images. How can I fix that? Its not a stick menu. Its on the responsive views mostly. I use elementor.
@websquadron
Жыл бұрын
Have you made the z index for the menu or header higher?
@plant_music
Жыл бұрын
@@websquadronwow thanks for your quick reply. I found the problem in another of your videos! #subscribed! It's was theme/elementor header clash. All sorted now, except that my logo is taking too long to load and is blurry no matter what I do, even when it's crisp in the header template/preview. Frustrating 😫
Пікірлер: 97