How to change the colour of an active Tab-button? - SOLVED

I Need Help
21

@JDW the answer is on the same website

Responsive CSS Only Accordion & Tabs Component | CSS Script

23

@PeteSharp

Maybe this is a question you can answer. I added the following code to change the tabā€™s background color on Hover, but the problem is it also changes the Active tab too, which I dislike. How do I alter the code below so it only changes the background color of the inactive tabs?

<style>
.nav a:hover {
  background: #d4d4d4 !important;
}
</style>
24

@JDW

You can add an attribute selector to the CSS. What that means is the style will only apply if the attribute matches.

When you look at the HTML you will see there is an attribute that is used to determine if a tab is active or not.

Targeting aria-selected="false" your code will be modified to look like thisā€¦

<style>
.nav a:hover[aria-selected="false"] {
  background: #d4d4d4 !important;
}
</style>

They are really useful actually.

1 Like
25

Haha, I donā€™t understand anything of this, anyone made a video to explain this slow and easy? as Blocs is make beautiful websites without codeā€¦

26

Which is trueā€¦ but Blocs is very expandable, you can be a new user or an advance web developer (or in between) and Blocs is an excellent tool. Perfectā€¦ no, excellentā€¦ yes.

No app can cater for every possibility, but a great app will provide the tools to do more.

27

I agree, I would just like to understand things easier, like if somebody here made short end easy instructions, like a video? Video is so easy these daysā€¦ Maybe Eldar already did it in this specific topic, I donā€™t know, but I can not find it.

28

Hello @JDW, try to add this code to page definitions code:

<style>
@media (max-width: 45em) {

.nav-item {
  width: 100%;
  margin-right: 0;
  margin-top: 0.2rem;
}
}
</style>

And check if this solve your problemā€¦

29

What are ā€œpage definitionsā€?
I added your code in Page Settings > Add Code > Header, but it doesnā€™t do anything useful. In fact, I donā€™t see any change at all to the 3 tabs in XS except that your code shifts them to the left slightly.

What I want in the XS breakpoint is a way to make the tab to be connected to the top of its content. Right now, the tabs are vertically stacked in XS, which means the top 2 tabs are disconnected from the content below and look odd. I want to know if there is a way to make the tab associated with the content below to be physically connected to that content below, similar to how the following web page does it in XS (shrink your browser window width all the way to see ā€œXSā€):

https://www.cssscript.com/demo/responsive-css-accordion-tabs-component/

30

ok, Iā€™m almost finishing a code that you will like, please wait 10 minā€¦

EDIT: 44 minā€¦ sorry

1 Like
43

We pass all information about this new request to a new topic:

1 Like