Header stays fixed while the body scrolls, featuring an extensive header

Check out this quick demo to see my progress so far:

http://jsfiddle.net/pawLs132/3/

fictitious "code" needed to post this question

I'm looking for a way to have a fixed header that is wider than the screen, but with the text fitting neatly within the given width. As you scroll horizontally, I want the rest of the text to be revealed (as shown in the provided example where only a portion of the header is initially visible). Additionally, I would like to ensure that no part of the body text shows up within the header container while scrolling. Thank you in advance for your help.

cssscroll

Answer №1

Utilize a fixed width by applying position:fixed to the header element

.on-top {
    position: sticky;
    top: 0;
    overflow-x: scroll;
    white-space: nowrap;
    width: 305px;
    background: white;
}

To avoid any overlapping, ensure that the body has a margin-top specified

.inner {
    margin-top: 3em;
}

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

Retrieve jQuery CSS styles from a JSON database

I've been attempting to pass CSS attributes into a jQuery method using data stored in a JSON database. However, it doesn't seem to be functioning as expected. I suspect that directly inputting the path to the JSON variable may not be the correct ...

jquerycssjson

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

javascriptcssvue.jsvuetify.jsnuxt.js

How can I make all child elements within a div uneditable?

Is there a way to make an entire div and all of its child elements uneditable without individually setting each one to readonly? This div contains a lot of dynamic content and I need a simple solution to prevent editing. If I set the parent div to readonly ...

javascripthtmlcss

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

javascriptcssreactjsmaterial-ui

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present ...

javascriptcssreactjsmaterial-uistyled-components

Guide on implementing a navbar in a React Application to navigate to a specific page and automatically scroll to a particular element

(UPDATED) I am working on a react app where I need to include the navbar on each page. To achieve this, I created a navbar component and added it to all new pages. The navbar functions correctly on the main page by scrolling to the selected section. How ...

javascripthtmlcssreactjsnavbar

Ways to emphasize the four edges of a table cell using border-collapse collapse

I am trying to emphasize the borders of cells with the class active. The challenge arises from the fact that the table's border-collapse property is set to collapse, causing the top and left borders of cells (except for the leftmost and top row cells ...

htmlcsshtml-table

Incorporate smooth transitions into isotope elements

I am currently working on implementing transitions to div elements within an isotope (v2) list. Specifically: .isotope-item { width: 340px; height: 223px; border: 10px solid black; background-color: #000; -webkit-transition: background-color 0.25s linear, ...

jqueryhtmlcsscss-transitionsjquery-isotope

Update the blue glow effect on checkbox inputs within Bootstrap 4 to create a unique visual experience

This query has been asked repeatedly, and I have exhaustively attempted numerous solutions. Here is my code snippet: <div class="btn-group" id="btn-container" data-toggle="buttons"> <label class="btn classic-design"> <input type ...

htmlcssfocusbootstrap-4

Preventing external HTML code from conflicting with CSS styles

One of the challenges I'm facing on my website is displaying HTML email content. Some of the emails contain CSS that messes up my site layout, causing certain elements to overlap each other. For example, a toolbar at the top of the page might cover i ...

htmlcsshaml

Styling the Material UI ImageList with a fade scroll effect

I am currently working on a horizontal scrolling ImageList using Material UI V5, and I'm looking to create a smoother transition at the edges of the list. I have managed to fade the edges, but my goal is to only fade them when the user has reached the ...

javascriptcssmaterial-uiimagelistscroll-position

Customize hover effects in tailwind css with dynamic values

I am trying to customize the text color on hover based on different category names using tailwind CSS. In my configuration, I have assigned a specific color code for each category like this : tailwind.config.js theme: { extend: { } }, co ...

javascriptcssnext.jshovertailwind-css

What is the best way to define the width of text inside a div block?

I'm having trouble adjusting the width of the text in my code to only fill 80% of the body element. I've tried using both the width property and padding, but neither seems to be working for me at the moment. Here's the HTML: <body&g ...

htmlcsswebcss-float

Is there a way to eliminate the space between the content inside a table cell and its borders?

I am struggling with a table setup that includes three columns and multiple rows. The first column contains an image, causing the cells in that row to resize based on the image size. When text is added to the 2nd and 3rd columns, it automatically centers w ...

htmlcss

What are the best methods for maintaining the appearance of my website when resizing my browser window?

I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same rela ...

htmlcsstwitter-bootstrapresponsive-design

Styling the Navigation in Wordpress

Could someone please help me figure out why the navigation on my homepage is distorted in versions before IE10, but displays correctly on the post page? I'm stumped as to why it functions properly in all other browsers. ...

htmlcss

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

Personalizing CSS for a large user base

My website allows users to choose themes, customize background, text, and more. I am seeking the best method to save all of these changes. Is it preferable to use a database read or a file read for this purpose? Any recommendations are greatly appreciate ...

csscustomization

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

Only one div is revealed by Jquery show and hide, while the other remains hidden

I'm attempting to utilize a single href link to toggle the visibility of two other divs. The first div should be visible by default, while the second div remains hidden. <a href="#ben1" class="fa fa fa-times closer" > <p> clickab ...

jqueryhtmlcss