Drop Down Menu overlaying text

I have been working with a drop-down menu and the drop down list wants to mesh with the text below.
I am using bootstrap and <div class="col-sm-4 col-md-4"> .
When reducing the screen size the Menu button will show a Vertical Menu and pushes the Text (row) down out of the way.
How do I get the text row to move out of the way?
For now I have been forcing space using <br /> several times to move the text down the page which shows as extra space below the menu before down down is clicked.


We’d need to see a demo of the page to see what’s going on.

Usually for dropdown menus you have a couple of standard choices. Either you position the displayed menu absolutely so that it is no longer in the flow and then covers the following elements (i.e. it sits on top). Or ( generally only on small screens) you would put the menu back in the flow so that when shown any other content is automatically pushed away because it is in the flow of the page. This means the menu items cannot be absolutely placed or removed from the flow in any other way.

All of this of course depends on your exact setup so we really need to see your page (or demo) to help further.

Thanks for your fast reply.
I just uploaded the pages with the drop down menu to my website.
Please visit: www.computersoftwaresystems.com

Hmmm. I’m not really seeing what you mean as there is nothing in the way and nothing overlaps. It seems to be exactly what you wanted if you just removed the breaks from the html.

e.g. This is what I see when I remove the breaks with devtools.

If that’s not what you meant then maybe some screenshots of what you see will help :slight_smile:

(Back later now as I have to go out .)

If I remove the multiple <br /> below the menu. I get

What browser and platform is that screenshot from?

I see this:


Note that the menu is supposed to overlap the following content when in that state. It is not meant to push the other content downwards because on a full screen that would be very silly. However it should be completely on top and not under the text as in your screenshot which is why I need to know which browsers you are using and which platform to save me running through them all :slight_smile:

I’m bad. The screen shot I posted is from the preview using HTML Kit website software.
I just upload index.html and used Windows Edge, Firefox and Chrome and low and behold the drop down menu did overlap the text the way I want. Thanks for describing ‘the way it should be’.
I just wasn’t sure if I was doing it right.
Guess I was. Now I will upload the other pages.
Thanks so much.

1 Like

Glad its sorted :slight_smile:

To get rid of the white space at the top and bottom of the dropdown menu and to squash a bug in edge at the same time you might want to add this:

#mynavbar-content .dropdown-menu{background:teal;list-style:none;}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.