We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

How can I make Navbar to be always sticky?

December 21, 2020 at 7:00 am #4831

[anonymous]

On some themes (es. Technews) navbar – aka menu header – only stick while user scroll up the page. How can I make it always sticky?

March 11, 2021 at 7:29 am #5325
[anonymous]
This requires knowledge of CSS Cascading Style Sheets. For the TechNews theme, I will give an example. I just tested this out and it works just fine.

First, read about theme overrides here. https://getpublii.com/dev/theme-overrides/#theme-overrides You will want to follow this procedure.

The CSS file you want to change is main.css.

Look for:
```
.topbar {
  background: var(--color);
  padding: 0 1.2142857143rem;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
```
and change position to fixed like so.
```
.topbar {
  background: var(--color);
  padding: 0 1.2142857143rem;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
```
Cheers!!
March 11, 2021 at 7:42 am #5326

[anonymous]

@publii-slpa Thank you for your very accurate answer, I really appreciate it.

March 11, 2021 at 7:51 am #5328

[anonymous]

Anytime I can help.