Pinning Header and Sidebar on Page Scroll to Always Visible

Anvil Q&A
#1

Hello everyone,

I am wondering if anyone has found a way to pin the side menu bar and the top header so that they are always visible when you scroll down a form page. I am using the card style template for my app pages.

Top Header:

image
image2536×97 3.43 KB

Side bar:
image

Thanks for any input

#2

to do this you’d need to adjust the css for the standard template.
You’d want to make the top bar and side panel have a fixed position.

here’s some info from W3 schools to get you started https://www.w3schools.com/howto/howto_css_fixed_menu.asp

#3

Hi guys, sorry for digging up this old topic, but I don’t know how to make Sidebar sticky. I know I just need to add some CSS like Fixed or Sticky, but I’m not sure where to add it. I use the Classic theme. Here the CSS related to Sidebar that I found (what should I change specifically?):

.sidebar {
    background-color: white;
    color: white;
    padding: 10px 0;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .placeholder {
    text-align: center;
}

.sidebar-elt::first {
    border-top: 1px solid #888;
}

.sidebar-elt {
    position: relative;
    border-bottom: 1px solid #888;
}

.sidebar-elt .drop-here {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 5px;
}

.sidebar-elt>.content a {
    font-size: 16px;
    color: white;
}

.sidebar-elt>.content a:hover {
	background: #F4F4F4;
}


.sidebar-elt .content a.anvil-component {
    padding-left: 14px;
    padding-right: 14px;
}

.sidebar-elt a {
    color: #ddd;
}

.sidebar-elt a:hover, .sidebar-elt a:active {
    color: white;
}

/* Responsive bits: Make the menu overlay the screen
   (and hidden by default) rather than displacing it
   on small screens
*/

.sidebar.floating {
    position: absolute;
    top: 62px;
    bottom: 0px;
    left: 0px;
    z-index: 2;
}

@media(max-width:767px) {
    .runner .sidebar {
        display: none;
        position: absolute;
        top: 62px;
        bottom: 0px;
        left: 0px;
        z-index: 12;
    }

    .runner .sidebar-click-guard {
        display: none;
        position: absolute;
        top: 62px;
        bottom: 0px;
        left: 0;
        right: 0;
        background-color: #888;
        opacity: 0.5;
        z-index: 10;
    }

    .designer .sidebar {
        max-width: 30%;
    }

    .sidebar.floating {
        top: 62px;
        z-index: 12;
    }

}
#4

if you want the menu button to have no effect in the classic theme you could do something like

(in dashboard.html)

    <div class="menu-btn" onclick="toggleSidebar();">
// becomes
    <div class="menu-btn" >

this way the sidebar is always open…

#5

Ah ok I’m sorry maybe I don’t fully understand this thread. What I’m asking is make the side bar always visible on scrolling. At the moment if I scroll down the main page the side bar is also scrolled down, which make the nav and other items there invisible. How can I make the side bar sticky when the main page is scrolled?

#6

in the dashboard.html between the script tags you could add

// Get the offset position of the navbar
var navHeight = $('.nav')[0].scrollHeight
var sidebar = $(".sidebar")[0]

// When the user scrolls the page, make the sidebar sticky
window.onscroll = function() {
  if (window.pageYOffset >= navHeight) {
    sidebar.classList.add("sticky")
  } else {
    sidebar.classList.remove("sticky");
  }
};

and on the same page add the css

.sidebar.sticky {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
}

adapted from: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

4 Likes