Padding: 20px 25px /* adding some space */īy using this table positioning without using table-layout: fixed on the parent, the cells will be sized according to the content of each one. Margin: 0 auto /* centering the element */ It would also be possible to use flexbox, but you have to make a choice ? /* Elements are placed one next to another */
Instead of using floating positioning I decided to use table layout this time. We will now place our elements on the same line. You can refresh your page in your browser if you follow the tutorial as you go, so you will see exactly what changes we are making. * Some basic styles */įont-family: Helvetica Neue, Helvetica, Arial, sans-serif I will use the colors of my blog, do as you wish, of course. Let’s start by making a mini reset of some styles: /* micro reset */ Ideally, the sticky aspect should only be “activated” on large enough screens and high enough to avoid obstructing the visibility of the content. Those styles will be rather brief and do not deal with the case of small screens. The rest of the markup is quite classical. It is important to note that the id attribute of the header will be used in JS in order to quickly access the element. I use the element with a banner role attribute to define the main header of my page. I invite you to use this menu structure, and possibly copy/paste the Lorem Ipsum from my demo page to get content and be able to scroll into your page. In the end we will have something like that: Finally, we will also see a variant where the menu only reappears if the user returns to the top of the page. First, the scroll value will be arbitrary (defined manually by us), then we will make sure that the menu only appears when the scroll has passed a certain element in the page. Beyond a certain scroll threshold in the page, I want to display the menu again to the user to allow faster access to it. The expected behavior is this: I have a header with a logo and a menu that are “classically” positioned. So I’m going to forbid myself any form of animation or positioning in JS, I’m going to use CSS to do so. I want to split the content (HTML), the form (CSS) and the interactions (JS), and in that order precisely. First of all, we all agree on the definition of the sticky menu? This is the thing that sticks to the top (often) of the page when scrolling down. I like to start from an idea and lay down some elements on the paper so that I don’t go with my head down in the code. But still! Let’s see together how we can do that. Sometimes it was justified, sometimes I approached the stereotypical ergonomic counter-example. I recently worked on several websites, and the request for a sticky menu was almost systematic.