Avatar of jblayney
Flag for Canada asked on

Make toggle fixed at top and change drop down alignment


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


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
iPhoneCSSHTMLWeb DevelopmentBootstrap

Avatar of undefined
Last Comment

8/22/2022 - Mon
Eoin OSullivan

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


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
Eoin OSullivan

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 2019-12-13_16-58-37.jpeg
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck

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
Eoin OSullivan

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>
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.


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

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">

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.