Bootstrap 3 customized multilevel menu not functioning correctly

Question

I'm using Bootstrap 3 to create an HTML template. You can find a demo HTML page here: http://cpimediagroup.com/demo/oasis2/

I've created a multilevel custom submenu (click on Services and you will see it) using this "hack" http://www.bootply.com/92442

Now the issue is when you click on any the sub menu Printing and packaging it opens. now click on oil and gas, it opens up but the first on doesn't close.

I am using Bootstrap 3. I tired fixing it but nothings is working.

I even searched other topics but no help could be found.

Thanks awaiting responses.

P.S the search box is also going out of the main nav.

Answer 1

A margin-right:-15px is being applied to .navbar-nav.navbar-right:last-child in bootstrap.min.css which is pulling the search box to right. To fix this override this style by adding the below style in your stylesheet

@media (min-width: 768px)
.navbar-nav.navbar-right:last-child {
   margin-right:10px; // add the value you need
}

About the drop-down check if the below fiddle will help you

Fiddle

Note: I have only included the Jquery in the fiddle to add the open class name, so i am not sure whether the changes i made will affect the other things you have used for offset.