Sign in

How can I make Navbar to be always sticky?

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

    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
    Avatar photopublii-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
    Avatar photospurivol

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

     

    #5328
    Avatar photopublii-slpa

    Anytime I can help.

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