Make toggle fixed at top and change drop down alignment

The problem is that your CSS is not properly configured for screen sizes.

the @media sections have gaps where the screenwidth is narrower than the contents and so they wrap

The hamburger menu is set to appear at 991px or narrower however the full menu needs a screen width of 1076px to avoid it wrapping below the logo on the left

I'd therefore be making changes to make the hamburger menu appear at 1080px and smaller instead for example .. or reduce the size of the full menu width

Eoin,

Im not sure what you are looking at but the theme CSS is fully developed with media queries will all the bootstrap breakpoints.

Also, the desktop menu is working perfectly so 1076 and 1080 widths are irrelevant to my issue, it is .

The main issue  is making the dropdown menu come out too the left of the hamburger menu so it has no reason to jump into the middle of the page

This is what your website looks like at 1025px wide on Chrome on OSX .. hence my comments

The reason the menu pops out to the right is that the hamburger menu button is aligned to the top left of the nav div.container element and when the menu below it is changed from Hidden to Visible the whole element appears to expand to the right.

If you move the <button> to the top right of that nav div.container element then is will appear to expand to the left

oh I see

I have been using Safari for developing, I hadn't gotten to the point of checking other browsers yet.

It looks like a clearing issue. This theme is my own bootstrap theme which i have used for years and I tweaked the menu to make the logo on the same line as the menu (usually they are different rows) If I restore my code to default settings that will be fixed.

I think i will delete this thread and fix the Chrome issue and they come at this from a different direction

ok so I fixed the clearing of the header, now all browsers have my original bug question

There's a bit of a fudge to get this to work

My solution is to wrap the <button> in a DIV and align the contents of that DIV to the right .. that pulls the button to the right side of the container .. in this way when the menu expands and the button remains in its position in the top right.

I'm not sure if this is what you intended but its how I'd do it

<div style="text-align: right;display: block; width: 100%;">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="true" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
    </button>
</div>

hello,

I tried that originally, it ends up having the same problem as the drop down menu that appears will also be in the div, then it will end up sliding down below the logo when opened..

Hello,
I have removed the logo for testing and it still does the exact same thing

I even added this to the button and it is ignored.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation" style="right: 0px !important">