Nav Tabs CSS

Wappler General How To
,
1

I really have no idea what I’m doing here. I’ve got this test nav tab thing set up in my layout template and I’m trying to make the tabs turn grey when I click them so that the tab blends into the grey row below.

image

image

My public>css>style.css. I just loaded it up with every action and still it doesn’t do what I want.

image
image516×757 44.2 KB

image

image

This one I had to make transparent as it was over the top of the other colours.
image

I thought maybe I needed to put something on the individual nav items rather than the whole nav list so I just loaded everything up with colour changes just to see what happens. This is what happens…

navtabs

Notice that the white never goes away. It just does a whole lot of things I don’t want it to do.

Can anyone tell me how I’m meant to do this?

Thanks.

2

Try adding !important to your CSS rules

P.S.: Use of !important should be moderated, as I’ve heard it’s not a good practice to use it often. Unfortunately, I don’t know any better :man_shrugging:

3

I threw it in and I can definitely get it to do things but not what I want. I wanted to add these properties onto the entire nav tab list and have it change colour accordingly. It seems I can only do it tab by tab.

I’m using the following 4…
image

When I add this to the nav list I get the following…
*On mouse down (momentary) I get an active event and the ENTIRE bar goes green.
*On mouse over I get the hover event and same thing, the entire bar is orange.
*The other 2 events don’t do anything.
*If I have all events on I just get the hover event as it seems to take precedence. This test was done one at a time.

When I add it to an individual nav item I can get the tab to change, but it’s still only mousedown (momentary) or a hover. These were just the ones available in the design panel so perhaps there’s another. I’m looking here but there doesn’t seem to be any that jump out at me https://www.w3schools.com/css/css_pseudo_classes.asp .

I know there’s a way to do it because the text is already changing colour if the tab is active. My brain is dead. I’ll have another look tomorrow.

4

image
image700×99 7.67 KB

Change this to:

.nav-item-test.active {
   yourRuleHere
}
5

So simple. That works great. Thanks.

I’m trying to work out where to find all the info relating to all of this. The bootstrap page on navs doesn’t seem complete https://getbootstrap.com/docs/4.0/components/navs/. Is there any resource that is a bit more concise? Something like this (https://bootstrapshuffle.com/classes) but when you click .nav-link it will show any related CSS, plus any related CSS of the parent .nav class, etc. Is there something like this?

Thanks.

6

In your case, don’t use the :active css selector…
Just use the .active class that is set automaticaly from the bootstrap js

7

Another quick on related to that.

If I’m using a colour from the app structure properties column, in this case secondary-subtle, how do I relate to that in CSS? Or how do I find what colour code it is? There is a secondary colour in the theme manager but no secondary-subtle.

image

image
image751×32 4.83 KB

The CSS below doesn’t work because it can’t find the class bg-secondary-subtle. I need to somehow find where the colour code is, or be able to use that class name.

.nav-item-test.active {

    background-color: bg-secondary-subtle !important;

}

Edit: I ended up just doing it the long way and used the eyedrop tool on an image. I’m sure there must be a better way though.

8

style="background-color: var(--bs-success-bg-subtle);"

you can find the color variables in your style tab:

image
image354×1011 33.3 KB