Responsive dropdown opening

I have a navbar with a single dropdown menu which works well on a large screen. It shows as a dropdown link with the word 'Menu' next to the down-pointing triangle and a single click opens it to show the individual menu items.

On a small screen it correctly reduces to a hamburger but clicking on it reveals 'Menu' next to the down-pointing triangle and another click is required to reveal the individual menu items.

Despite spending several hours on it, I have yet to find a way to get the individual items to be revealed on the first click.

Anyone able to help please?

got a link to the site? Also:

Which navbar did you use? What browser are you testing this in?

I've stripped the page down to the navbar and uploaded it to http://spinningweb.net/.

I'm checking it in the latest versions of Firefox and Chrome.

You can try this

$(document).ready(function() {
  $(document).on('click', '.navbar-toggler', function () {
    $('.dropdown-menu').toggle();
  });
});

How did you make that nav? Looks like you put it together yourself rather than using a default one? All your styles are inline .... not a good idea at all especially for things like navigation.

I built it a loooong time ago when I first got BSS and was finding my way with it! I really should try to find time to tidy it up. Current work is devoid of inline styling.

However, any thoughts on skipping that second click?

Best advice I can give is to duplicate your site (save it with a diff name) then open that one and put a more current nav in it. There are a good handful of them in the UI section that should fit your needs and should work pretty much out of the box. Then after you determine that it works as intended, open your main site project along with that one and compare it and see what's different. Best way to learn that I know of other than taking tutorials and courses of course :)

To bring this up-to-date...

I searched for suitable navbars but couldn't find one to avoid my issue so I duplicated the dropdown links as separate links in the navbar and then used media queries to hide the dropdown on small screens and the separate links on large screens. It works well!