starred/AdGuardHome

Fork 0

mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2026-03-04 00:01:12 -05:00

Enable sticky header CSS position on top navbar #5258

New issue

Open

opened 2026-03-04 05:59:47 -05:00 by deekerman · 5 comments

deekerman commented

2026-03-04 05:59:47 -05:00

Owner

Originally created by @timheuer on GitHub (Jun 17, 2024).

Prerequisites

I have checked the Wiki and Discussions and found no answer
I have searched other issues and found no duplicates
I want to request a feature or enhancement and not ask a question

The problem

As I've been navigating around in the portal and scrolling I wanted the header to always be there for quick navigation. I have to scroll back up to the top to change filter views, etc. It's small but a delightful UX to have the headers stick.

Proposed solution

Enable CSS sticky positioning on the header

In https://github.com/AdguardTeam/AdGuardHome/blob/master/client/src/components/Header/Header.css#L35-L39, updating Line 35 to:

.header {
    position: sticky;
    top: 0;
    padding: 5px 0;
    z-index: 102;
}

Would result in this experience:

https://github.com/user-attachments/assets/7e1d9c83-4672-49eb-b412-d7eee66f99d7

Alternatives considered and additional information

No response

Originally created by @timheuer on GitHub (Jun 17, 2024). ### Prerequisites - [x] I have checked the [Wiki](https://github.com/AdguardTeam/AdGuardHome/wiki) and [Discussions](https://github.com/AdguardTeam/AdGuardHome/discussions) and found no answer - [x] I have searched other issues and found no duplicates - [x] I want to request a feature or enhancement and not ask a question ### The problem As I've been navigating around in the portal and scrolling I wanted the header to always be there for quick navigation. I have to scroll back up to the top to change filter views, etc. It's small but a delightful UX to have the headers stick. ### Proposed solution Enable CSS sticky positioning on the header In https://github.com/AdguardTeam/AdGuardHome/blob/master/client/src/components/Header/Header.css#L35-L39, updating Line 35 to: ```css .header { position: sticky; top: 0; padding: 5px 0; z-index: 102; } ``` Would result in this experience: https://github.com/user-attachments/assets/7e1d9c83-4672-49eb-b412-d7eee66f99d7 ### Alternatives considered and additional information _No response_

deekerman added the

feature request

labels

2026-03-04 05:59:47 -05:00

deekerman commented

2026-03-04 05:59:56 -05:00

Author

Owner

@andylau004 commented on GitHub (Jun 18, 2024):

got it!

i use this code snippet

it works

thks,

@andylau004 commented on GitHub (Jun 18, 2024): got it! i use this code snippet it works thks,

deekerman commented

2026-03-04 06:00:09 -05:00

Author

Owner

@timheuer commented on GitHub (Jun 18, 2024):

I have a PR ready, but per the contribution guidelines, waiting for maintainer discussion.

@timheuer commented on GitHub (Jun 18, 2024): I have a PR ready, but per the contribution guidelines, waiting for maintainer discussion.

deekerman commented

2026-03-04 06:00:09 -05:00

Author

Owner

@ainar-g commented on GitHub (Jun 18, 2024):

I'm not really sure we'd merge it, at least right now. Even when we make popular UI changes with a lot of 👍 reactions people still come to the issue tracker to complain and ask to revert it back. With a change with unknown level of support, this is even more likely.

Then again, if there are enough positive reactions under this issue, and people really want it, we will merge it. (Please no 👍-only comments, only reactions.)

@ainar-g commented on GitHub (Jun 18, 2024): I'm not really sure we'd merge it, at least right now. Even when we make popular UI changes with a lot of :+1: reactions people still come to the issue tracker to complain and ask to revert it back. With a change with unknown level of support, this is even more likely. Then again, if there are enough positive reactions under this issue, and people really want it, we will merge it. (Please no :+1:-only comments, only reactions.)

deekerman commented

2026-03-04 06:00:09 -05:00

Author

Owner

@timheuer commented on GitHub (Jun 18, 2024):

Thanks for expectations @ainar-g! Should I prepare the PR or wait until y'all say you'd take it?

@timheuer commented on GitHub (Jun 18, 2024): Thanks for expectations @ainar-g! Should I prepare the PR or wait until y'all say you'd take it?

deekerman commented

2026-03-04 06:00:09 -05:00

Author

Owner

@ainar-g commented on GitHub (Jun 18, 2024):

I feel like it's better to wait. Things can change in the meantime on the front-end side.

@ainar-g commented on GitHub (Jun 18, 2024): I feel like it's better to wait. Things can change in the meantime on the front-end side.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/AdGuardHome#5258

No description provided.

Rows
Columns