Header that stays put like a magnet, similar to Slack's

Attempting to mimic the Slack layout has been a challenge. The one hurdle I can't seem to overcome is overlapping the date over the header. After inspecting Slack's HTML/CSS, it seems they use a mix of Sticky and absolute positioning. My preference, however, would be to utilize relative positioning.

HTML

<html>

<head>
    <title>Slack</title>
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
    ... (and so on)
    
</body>

</html>

CSS

/************ reset ************/
...
/************ fonts ************/
...
@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), ...;
    unicode-range: U+0000-f8fe, U+f900-ffff
}

... (remaining font definitions)

/********************************/

.p-client {
    overflow: hidden;
}

...

/**********************/

Link to jsbin

Sticky under header:

https://i.sstatic.net/JPE9D.png

htmlcsssticky

Answer №1

I discovered a simple solution where I placed the highlighted purple part within the blue section to utilize the z-index property effectively.

/************ reset ************/
...
/************ fonts ************/
...
/************ client ************/
...
.p-client {
overflow: hidden;
}

...

/********************************/

<html>

<head>
...
<link rel="stylesheet" href="./styles.css">
</head>

<body class="sk-client-theme--dark">
...
<div class="p-workspace__secondary_view"></div>
</div>
</div>
</div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why are my AngularJs elements not appearing in the print dialog window?

Whenever I try to open the print Dialogue on a specific page, all I'm seeing is a blank screen. The majority of the content on this page consists of AngularJS elements. To trigger the print dialogue, I use the following code: <a href=""onclick="wi ...

javascripthtmlcssangularjsprinting

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

How can you make a Tempory Drawer wider in Material Components Web?

Increasing the Width of a Temporary Drawer in Material-components-web Greetings! I am currently facing an issue with Material-components-web In the provided demo here, I would like to extend the width of the Temporary drawer to accommodate additional co ...

javascripthtmlcssmaterial-designfrontend

tips on sending multiple data- id in a modal window

Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...

javascriptphpjqueryhtmlajax

What is the best way to place this dropdown in a fixed position within a parent element with overflow scrolling

I am facing an issue with a dropdown menu inside a parent div. The parent div has a fixed height and is set to overflow: auto. My goal is to have the menu extend beyond the boundaries of the parent when opened, but currently it just increases the height of ...

htmlcss

"JQuery enables the dynamic cloning of form elements, allowing for attribute adjustments that can be easily reverted

I've been grappling with a puzzling issue recently. I used jQuery to clone a form and assigned IDs to the form elements to increase incrementally with each clone. However, following server validation errors (using Laravel), the IDs of the elements rev ...

htmljquerylaravelforms

Change hyperlink text color on Android CheckBox

I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...

javaandroidhtmlcssxml

Showing MYSQL data in an html table

Hey there! I've been working on a website that features HTML5 video player to play videos. I have a "watch" page that retrieves data from the database based on the id parameter (watch.php?v=1). Now, I'm looking to display the most recent videos o ...

phpmysqlsqlhtml

Implementing HTML5 form validation without a submit button and using a personalized error message

I am facing an issue with displaying the HTML5 inline validation bubble without the use of a submit button. The catch is, I am not allowed to use jQuery, only vanilla JavaScript. Here is the HTML I am working with: <a id="send" href="#">Send</a& ...

javascripthtmlformsvalidation

How to switch between classes for elements and return to the original one when none of the elements is chosen

Hello there, I need some assistance. Here's the scenario: I am working with a grid of six items. My goal is to have the first item in the grid become active by default. When the user hovers over any of the remaining five items, I want the active clas ...

javascripthtmljquerycss

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

I created a website with a simple guessing game where users can win if they enter the right code. My approach involves using JavaScript: <script> function z() { var b = document.getElementById('idea'); var a = document.g ...

javascripthtml

Align a div in the center with another div positioned to its left and floated

I am in the process of creating a footer with three components: a logo aligned to the left, a centered navigation menu, and a set of social icons on the right. I have encountered an issue where when I float the logo to the left, the list items within my na ...

htmlcss

Setting the font-size in HTML/CSS to dynamically adjust and fill the entire width and height of its

I'm trying to make a <div> element adjust its size based on the browser window. Within this <div>, there is a paragraph of text: <div style="width:80%; height:80%; margin:10%;"> <p>Paragraph of text. Paragraph of text. Pa ...

javascripthtmlcssfont-size

Utilizing jQuery to apply a class to an element and modify the CSS parameters with custom values simultaneously

Unsure if this idea is feasible, but I'll attempt to explain my requirements. I am interested in accomplishing something like the following: A CSS class with variables X, Y, and Z left undefined: .r {border-radius:Xpx;-webkit-border-radius:Ypx;-moz ...

jquerycss

Submitting forms with Ajax in IE(8)

Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxforms

Why is inner HTML returning input/textbox instead of the value?

I need help extracting the value from an input/textbox within a table cell. Although the rest of my code is functioning correctly, I'm struggling to retrieve the value from this particular input element. I've attempted to access the value using ...

javascripthtml

Switching between various quantities of inputs in each row using Bootstrap V3

My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request. Check out my fiddle here: https://jsfiddle.net/06qk4wh4/ <div class="form-group col-sm-12"> <label class="control-label col- ...

htmlcsstwitter-bootstrap

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

javascriptcss

Using jQuery to update a variable value based on user selection from a dropdown menu populated with database values

I am currently stuck on a project where I need to dynamically change the content of a DIV based on the selection made in a dropdown using jQuery. For example, here is what I want to achieve: <select name=""> <option value="10">10 clicks</o ...

javascriptphpjqueryhtmljquery-ui

Essential components to include in Bootstrap 4 customization

In my current application, I am utilizing bootstrap and aiming to solely customize the primary color in the provided scss file below: // Custom.scss $theme-colors: ( "primary": #243B55 ); // Option A: Include all of Bootstrap @import "../node_module ...

csstwitter-bootstrapbootstrap-4sass