We help IT Professionals succeed at work.

Make toggle fixed at top and change drop down alignment

jblayney
jblayney used Ask the Experts™
on
Hello,

If you view my menu here on an iPhone or a responsive view.

http://careers.baffinland.com

The menu will slip below the logo and have the dropdown menu fly out to the right.  How can I make it locked to its position at top and fly out to the left below the logo?  So the hamburger menu will be aligned to the right side of the dropdown menu
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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

Author

Commented:
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
2019-12-13_16-33-21.jpeg
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 2019-12-13_16-58-37.jpeg

Author

Commented:
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

Author

Commented:
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>

Author

Commented:
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..

Author

Commented:
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">
Commented:
Hello,

I went and rebuilt the menu code from scratch from the most recent bootstrap examples, it works now.