Navbar transparent for dropdown menu

Beginners
#1

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):

  • 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.

#2

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?

Cheers,
Bob

#3

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
image738×497 68.3 KB

When it menu icon is clicked you get this

image
image735×505 37.4 KB

What I am trying to achieve is this:

image
image741×502 71.6 KB

#4

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

#5

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
#6

Many thanks Bob, solution 2 did exactly what I wanted.
David

#7

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! :smiley:
Bob

#8

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