Develop Reference

anchorlink in navigation with slide-function jumps too far

The navigationlink "Leistungen" (marked black in below image) is linking to an anchor where you can find an carousel-slider. The submenu is doing the same + firing the function to slide to the relating carousel-slide.
Beglaubigungen
But out of some reason if you load the following site and try it, its jumping too far (following image): https://bm-translations.de/
The strange thing is, if you then click a 2nd time the same navigation link, it is jumping to the right anchor.
Why is this happening and how to solve this?

In your page, after clicking that menu link, it scrolls down to where that section is in the document.
It's scrolling down to a block element (I assume some JS script is smooth scrolling it to the ID):
<div class="row" id="leistungen"></div>
In your H2 element directly inside of that div, you have your heading with some padding on top:
<h2 style="text-align:center;font-size:24px;padding-top:30px">Leistungen Ihres Übersetzungsbüros</h2>
If you added that padding yourself, go ahead and increase that to 90px (or whatever amount you want).
Or else just add this to the bottom of your css file:
#leistungen > h2 { padding-top: 90px; }
The only alternative is to edit the JS that's creating the smooth scrolling feature.
EDIT: I'd even recommend streamlining your H2 padding in css, not on the page... each of your H2's have their own unique padding-top.
Before:
After:

Found a Solution:
<a onclick="document.getElementById("carousel-selector-1").click();location="https://bm-translations.de/#leistungen"">Beglaubigungen</a>

Menu in Bootstrap 4 disappears when the mouse movement is slow

I'm running this fiddle and when the mouse pointer moves quickly from from START to the unfolded menu, everything works great. However, when the movement is slower, the menu closes because it feels like the mouse's left.
const menu = $("li.dropdown");
menu.on("mouseenter mouseleave", () => {
menu.toggleClass("open");
});
Initially, I tried to make the list item control taller but realized quickly that the menu will open below it (plus this unfortunate vertical distance).
What can I do about it?
Apparently Bootstrap creators found this good for some reason (or didn't think about mouse movements but rather clicking). Am I setting up the hover event in an inappropriate way, perhaps?

for me is better this solution
here is the fiddle
.open>.dropdown-menu{
margin-top: initial;
}

This css fixed it for me (Bootstrap v4.3.1):
div.dropdown-menu {
margin-top: 0 !important;
}

Yes, it's caused with space between menu element and menu itself. When you are moving fast, it's ok, because cursor "jumps" directly to menu, but moving slowly, you will leave menu item area and menu disappear. One solution which comes to my mind is to move it 1px higher:
.open>.dropdown-menu {
top: calc(100% - 1px);
}
Working JSFiddle.

jQuery .show doesn't display the background

I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.

You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}

Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly

Scrolling dropdown menu scrolling too much

I am using the following solution to scroll very long menus in my dropdowns:
http://css-tricks.com/long-dropdowns-solution/
Is there any way to stop the menu's from scrolling and becoming any shorter once the last menu item has appeared? At the moment, they keep shrinking even when the menu has fully loaded. I would like to avoid that if possible.

I think your trying to say your actual menu list items are shrinking? I'm not exactly sure if your saying the whole menu itself shrinks or just the items itself.
Try giving the (Li)'s a height and see if that keeps them consistent. Example.
nav li:hover li {height:3em;}
or
nav li:hover ul a {height:3em;}
Let me know if that helps!

JavaScript: Nav Bar Drop Down inside List Item

Can someone please provide insight into how I can replicate the functionality shown in this example.
Specifically, the navigation bar (first tab) > Watches. The user can hover over the link and a full screen width dropdown is displayed and hides after either when a user clicks on a link or mouses out. I am creating a similar menu type drop-down and need this to function across all platforms and browsers, including ie7.
Appreciate the insight.

Nothing terribly fancy there, or that would require modern browsers, just using typical :hover psuedo-class to show the the menus, which are initially hidden.
There is a wrapper #navigation that sets position: relative (this allows children to be absolutely positioned relative to it). Then there is a <nav> tag inside there used to center. Then inside of that is a ul.level-1 with li's that are display: inline which are the main menu items. Then within those are the menus you are fond of, which are absolutely positioned down a bit and are 100% width.
Then the bit that displays the menu:
// level two menu hidden by default
div.level-2 {
display: none;
}
// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
display: block;
}