Tabs with a lot of information

[hidroxid]

Hello

All the pages have a floating button that appears when one goes down beyond the header and allows to go back up to the top.

In the case of my Tabs that have a lot of information, when browsing on a mobile, you tend to lose the thread a bit or let’s say the reading is not optimal (perhaps it is not the appropriate tool).

So I ask: Is it possible to create a similar floating button that appears inside the area of each tab to raise the focus back to the beginning of the tab or is it better to create a href that goes up to the id of the beginning?

Thanks in advance.

---

Template Version: 8.3.0

[Support]

Hello,

That’s possible.

Inside each tab content your should define an ID at the first paragraph. for example:

<p id="init">Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>
<p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p><p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p>

<!-- Button to go back to top -->
<a href="#init" data-hash data-hash-offset="30" class="btn btn-primary">Back to Top</a>

We hope this helps!

kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Hello

Well, i think more in a float buttom but ok, this work good too!

Thanks a lot.

---

[hidroxid]

Wow, a detail:

When the button is pressed, the color changes, that’s fine, but when it is released, the color change remains.

Is it possible to have the same button but that the color return to the original when the mouse click is released? Like btn-danger or btn-info but with the primary color. I tried to use bg-color-primary in the class but the result was not suitable.

Thanks!

---

[Support]

Hello,

Please try with this class for the button:

<a href="#init" class="bg-primary text-color-light px-5 py-3 d-inline-flex align-items-center justify-content-center rounded text-decoration-none font-weight-bold"..................

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Umm

It didn’t work and it lost some proper features of that button type.

Playing with the available options, I see that the problem is generated when I use the [data-hash data-hash-offset = “90”], I have it like this:

Upload

If I remove the [data-hash data-hash-offset = “90”], the button does not lose color after clicking it, but it does not go up smoothly and incidentally does not go up to the right place.

Some clue?

---

[hidroxid]

Sorry, the code is:

<a href="#init-tab" data-hash data-hash-offset="90" class="btn btn-primary btn-xs bg-primary font-weight-bold"> Upload </a>

---

[Support]

Hello,

Let’s try another approach then. First please give a custom class name for the button:

<a href="#init-tab" data-hash data-hash-offset="90" class="custom-btn-style btn btn-primary btn-xs bg-primary font-weight-bold">BUTTON TEXT</a>

Add in (css/custom.css):

a.custom-btn-style:focus, a.custom-btn-style:active {
    background-color: #0188cc !important;
}

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Hello

Sorry to tell you that the suggestion still doesn’t work as expected.

The problem is that clicking a button takes focus and holds it. When there are several buttons, the inconvenience can be better appreciated.

In the example of buttons Buttons example you can see the detail

In my case, each button has a unique function and the idea is that it does not stay with the focus.

Any other suggestions?

---

[Support]

Hello,

Yes, when clicks on the button takes a focus and holds, but the custom CSS code I sent in my previous reply should fix it. The button will still focus, but the color will be the same, so the visual effect of focus/active will not appear. Please try to clear you browser cache if you are running the project into a local web server.

There’s no way to remove the focus of the button, since it’s already declared in the theme core files. The only way is overwrite the colors of these states to be same as the normal state, so we will not see the focus effect.

With this new code below you will remove the hover color state too:

a.custom-btn-style:focus, a.custom-btn-style:active, a.custom-btn-style:hover{
    background-color: #0188cc !important;
}

* This is supposing your btn-primary color is #0188cc. If you are using an other color, please change the value to respective color.

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts