# Navbar transparent for dropdown menu **URL:** \ **Category:** Beginners\ **Created:** [November 30, 2020, 11:31am UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737 "2020-11-30T11:31:23Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![davidxtaylor](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@davidxtaylor](https://forum.pinegrow.com/u/davidxtaylor)\ **Post date:** [November 30, 2020, 11:31am UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/1 "2020-11-30T11:31:23Z")
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. Presently I have this code (site is at [bjbg.uk](https://bjbg.uk)): - Graves guide etc Any help appreciated as to which element in the pinegrow selector window to highlight and which property to change would be appreciated. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [November 30, 2020, 12:02pm UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/2 "2020-11-30T12:02:49Z")
Hi @davidxtaylor, I don’t see any navbar on your site at all. Just trying to interpret the question - > [@davidxtaylor](#): > > the background bar at the top remains of a fixed depth Do you mean you want the navbar to remain fixed or “sticky” at the top. Not sure what you mean by depth here. > [@davidxtaylor](#): > > on top of an expanded background that obscured the page behind. So the dropdown items should be on a transparent background? > [@davidxtaylor](#): > > but for the dropdown menu to be on top of the page itself. 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? Cheers, Bob ---
**Author:** ![davidxtaylor](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@davidxtaylor](https://forum.pinegrow.com/u/davidxtaylor)\ **Post date:** [November 30, 2020, 12:25pm UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/3 "2020-11-30T12:25:38Z")
Hi sorry with the poor description. Pictures will help: What I have at present is a menu icon and an always-collapsed menu. The page looks like this ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2d91a59e50d0a5e75161f2d53138ae48e172649a.png) When it menu icon is clicked you get this ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f4b8b030ae75cc4426b8db8cdb47bf4e9d58007d.png) What I am trying to achieve is this: ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9a5f6aa3943dfe9c89aaee75ba48cc5bf272e627.png) ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [November 30, 2020, 3:29pm UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/4 "2020-11-30T15:29:17Z")
Click on “edit on Codepen” and copy past the code. Change colors according to your taste! Only LESS needs to be processed to CSS. Good Luck, David https://codepen.io/brenden/embed/preview/VLjKMQ?height=300&slug-hash=VLjKMQ&default-tabs=css,result&host=https://codepen.io > **[20 Bootstrap Hamburger Menu to Increase Visitor Engagement - Colorlib](https://colorlib.com/wp/bootstrap-hamburger-menu/)** > > Are you looking for a creative yet functional menu bar for your site? Have a look on this curated list of Bootstrap Hamburger Menu... > **[Bootstrap navbar menu kit, dropdowns, mega menu, offcanvas and more](https://bootstrap-menu.com/)** ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [November 30, 2020, 5:09pm UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/5 "2020-11-30T17:09:48Z")
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. 1. You can abandon the Bootstrap navbar for a more custom HTML/JS or CSS solution. 2. 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 ---
**Author:** ![davidxtaylor](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@davidxtaylor](https://forum.pinegrow.com/u/davidxtaylor)\ **Post date:** [December 1, 2020, 8:28am UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/6 "2020-12-01T08:28:03Z")
Many thanks Bob, solution 2 did exactly what I wanted. David ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [December 1, 2020, 10:03am UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/7 "2020-12-01T10:03:06Z")
No Problem. I meant to ask. How are you accomplishing the map for each card? I could prowl around the card, just easier to ask! 😃 Bob ---
**Author:** ![davidxtaylor](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@davidxtaylor](https://forum.pinegrow.com/u/davidxtaylor)\ **Post date:** [December 1, 2020, 12:05pm UTC](https://forum.pinegrow.com/t/navbar-transparent-for-dropdown-menu/4737/8 "2020-12-01T12:05:34Z")
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