Dropdown menu in navigation bar doesn't work

Wappler General Need Help
1

I can’t find any details on how to make these work. I put one in and it allows me to enter the items but it doesn’t show the dropdown when I look at it in a browser. Also, are there any good animation styling documentation for navigation menus. I like to have my buttons really pop but the default behaviors are very slight.

Thanks,
Rick

2

Is it possible to give us a link to the site so that we can see the problem first hand?

3

I got it to work by deleting it and adding it back in. I must have done something in the code. It works fine now. I’m experimenting with changing the background of the menu item to a gif file to give more of a metallic shine background. I was able to use the background-image : url"filename") and it looks awesome. I can’t seem to find the css property for the menu item when you hover or click. Do you happen to know where that is?

Thanks
Rick

4

The nav item will probably look like

<a class="nav-item nav-link href="index.php">Home</a>

in which case the css selector would look like

a.nav-item:hover

A couple of notes:

  • there is no hover effect on touch screens
  • do not touch the original Bootstrap CSS file, do the bespoke styling in a separate style sheet that is loaded after the Bootstrap style sheet.
5

thank you. im not sure what css file i’m writing to. How do i know? I’m using the style option and see all the properties for the element chosen, but i’m only using the top item which I assumed was writing that css to supercede the defaults. I see the css in the code so I don’t think I’m writing to another file.

6

You are best off to create a new style sheet as per
image

In part 21 of this tutorial I have create a new style sheet https://www.youtube.com/playlist?list=PLUjqTJN3byC9kK8YZkmGwjo9nrEipl2yb