How to change colours in Navs (BS4)

1

Can anyone please let me know how to change the default colours in the Bootstrap 4 Navs?

The default colour properties only change the unselected backgrounds as well as all the text without differentiating between selected and unselected text.

When using pills style I’d like to change the colour of the box surrounding the selected item (background) as well as the colour of the text of the selected item.

When using tabs style I’d like to change the colour of the line and actual selected tab (background) as well as the colour of the text in the selected tab.

Grateful for any help.

Thanks.

2

This is what I use. Have to add and remove active class to tabs manually…

/* non-active tab color */
.nav-tabs>li>a {
background-color: (color) !important; 
color:(color) !important;
}

/* active tab color */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: (color) !important;
background-color: (color) !important;
border-color: (color) !important;
}

/* hover tab color */
.nav-tabs>li>a:hover {
color: (color) !important;
border-color:  (color) !important;
background-color: (color) !important;
}

.tabstrip {
Left: 0px !important;
width: 100% !important; 
height: 40px !important; 
background-color: (color) !important;
font-size: 17px !important;
}
3

Thanks very much for that.

It works for the non-active and hover tabs, but not for the active (or selected) tab.

I also changed all the ‘tabs’ for ‘pills’ and found the same thing - non-active and hover pills work but not the active/selected pill.

is ‘li.active’ correct? Or is something else missing.

Really appreciate your help here.

Thanks.

4

Are you using $("#navname_x").addClass(“active”) where x is the selected tab number?

(and removeClass for the un-selected tabs)

5

No idea I’m afraid.

I just dragged in a Navs from the Toolbox and included your code in the Project CSS. I have no idea how AppStudio deploys or implements its Navs.

Sorry I can’t be more helpful. Have we hit a dead end? :frowning:

Thanks.

6

You just need to put it in the onclick event:

Function navname_onclick(x)
  $("#navname_" & x).addClass(“active”) 
End Function
7

Thank you so much. It worked. I added that code in my form_onshow function as I wanted it to already be selected and it works fine.

There’s just one little thing left which I hope you don’t mind helping me with to finish it all off. :slight_smile:

I need to change the colour of the line that extends from the selected tab under the remaining options to make it actually look like a tab. Right now my tab style looks more like the pill style because that line is a colour that matches my current background. Would you know how to change that?

Thanks very much for all your help.