Sign in

How can I make Navbar to be always sticky?

  • This topic has 3 replies, 2 voices, and was last updated 3 months, 2 weeks ago by .
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4831
    spurivol

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

    #5325
    publii-slpa

    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!!

    #5326
    spurivol

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

     

    #5328
    publii-slpa

    Anytime I can help.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.