Strange behavior of Navbar

Wappler General Need Help
1

Bildschirmaufnahme toggle nav.mov (3.8 MB)
I have questions concerning Navbars:

  1. what is the reason of the behavior shown in the movie?
  2. how can I change the color of the Dropdowns
  3. how can I make a sticky bar.

Thanks for your answers in advance

2

Hello @ulrichantz

  1. From what i see it seems to me you tried to edit the CSS of the navbar and probably broke something. Please provide a link to your page so we can check what is broken.

  2. You need to use custom CSS styles to style the dropdown.

  3. There is an option for that in the Navbar properties, in the properties panel.

3

As for dropdown styling. Here’s the default bootstrap 4 dropdown styles. Copy them in your custom css file, include it after bootstrap css include and edit them as you need:

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}

I believe you are interested in color/background-color and border styles so most probably you won’t need to edit any of the other styles.

4

I reinstalled the bootstrap.css and js. files but the Navbar behavior is still the same.
here is the link to the page http://www.ant-s.eu/Test/index.html

5

Problem solved!
An other css disturbed it