Bootstrap dropdowns
Currently i am learning front-end on a platform and i am currently in the bootstrap modules.
While being at the navbar part of the course i had to make a navbar, but since i wanted to practice some more i decided to try and make a random navbar from any site.
I had WZhub open and decided to make that one.
Almost finished i ran into a problem with my dropdowns. the problem is:
When being in a screensize smaller dan LG (992px), my middle sector going collapses into a offcanvas and my dropdowns on the right side open up inside the navbar.
which is not the case when i resize to a > 992px screen.
What i want is the same result of a dropdown overlay when the screensize is >992px, when i am in a <992px screensize.
I am unable to find the problem nor can find anything in the bootstrap docs how to solve this.
Code:
Hope anyone is able to help.
Every feedback on the code is welcome though.
Cheers
3 Replies
Tested in codepen and using Inspector I found that the drop-down changes from
position: absolute to position: static for some reason (?)
Furthermore, would recommend changing drop-down menu position from left: 0; to right: 0; so it won't create an overflow (out to the right).🙏 that did the job! working exactly as expected now.
Thanks for the help and advice @Lamer of Sweden
No worries! :thumbup: