I am trying to achieve a Bootstrap4 navbar that has a solid background but where the background bar at the top remains of a fixed depth even when the menu items appear uncollapsed.
The list is by default collapsed at all sizes. Currently when the user clicks the hamburger icon, the ul items appear correctly but on top of an expanded background that obscured the page behind.
I want the bar on which the brand and the hamburger icon to remain solid, but for the dropdown menu to be on top of the page itself.
Hi @davidxtaylor,
I don’t see any navbar on your site at all.
Just trying to interpret the question -
Do you mean you want the navbar to remain fixed or “sticky” at the top. Not sure what you mean by depth here.
So the dropdown items should be on a transparent background?
Not sure what you mean on top of the page - the items should already display on top of the page contents. do you want the dropdown to push the content down the page?
Hi @davidxtaylor,
I’m afraid that is the way the Bootstrap navbar works. You have two choices that I can think of right at the moment.
You can abandon the Bootstrap navbar for a more custom HTML/JS or CSS solution.
You can set your navbar background to transparent. Then position a div at 0,0 with the background color you want for your div, a width of 100% and a height of 468px. This will simulate the background you have now, but won’t change size with hamburger toggle.
Bob
I set the marker X and Y in % for each record and put them into the DB table that feeds the page, then runtime JS moves the icon into position on top of the map image. I was pleased to find that this works at any scale.
D