How can I keep my header at the top of the page instead of in the middle?
`header {
position: sticky;
top: 0;
}
<!--body { display: flex; justify-content: center; align-items: center; }
h1 {font-family: sans-serif;}
h1 {text-align: centre;}
-->
</style>
</head>
<body>
<h1><a href="https://w1545565.users.ecs.berries.ac.uk/webDev/one.html"> Site Map </a>
</h1>
<hr>`
To make an element fixed on the screen, use the CSS property "position" with a value of "fixed". Check out the code snippet below (taken from w3schools, learn more about it here):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>Looking to center an image that is positioned absolutely horizontally within a container that is relatively positioned. After attempting with CSS and not finding success, I ended up using Jquery. http://jsfiddle.net/CY6TP/ [This is my attempt using Jquery ...
Is there a way to hide the next element using execCommand configuration? Font Tag <font color="xxxxxxx"></font> I am facing an issue while creating a simple editor for a project. I am struggling with CSS formatting and the font tag is not he ...
I am looking to update the URL while scrolling instead of changing the menu class. Here's the reference I found: https://codepen.io/anon/pen/LdLgNo I made some modifications by adding push state, but I'm facing an issue with a fixed header. I ...
I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...
The React app I'm working on includes the code below. The Col component is imported from React-bootstrap <Col md={5} align="center"> This is a column </Col> When using Typescript, I received the following warning: ...
I am currently working on a 2d HTML canvas game that functions well. However, I would like to implement a scrolling camera so that the player cannot see the entire map at once. Unfortunately, I have no idea how to achieve this and my attempts to research o ...
Attempting to center content over a full-screen slick slider from kenwheeler.github.io/slick/, I used a flexbox but the content remains at the edge of the viewport. It seems like an issue with the position tag in the slick CSS, but I can't figure out ...
When using my Android app, I encounter an issue with a webview that contains a form and a submit button. The button code snippet is as follows: <button role="button" class="btn ng-binding" ng-click="actions.collect()" tooltip="default" title="Check f ...
Can someone help me make the transition between tall and short images on my website smoother? I am not familiar with coding terminology, so please bear with me. The attached image provides a visual representation of the changes I am looking for: click he ...
I recently created a landing page using Bootstrap, but I'm having an issue with the navbar not being fixed. Here is the code for the navbar: <nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded"> < ...
My website features a div with a blurred image that I want to gradually unblur upon hovering, using transition-property and transition-duration. I have two versions of the image prepared - one blurred and one unblurred. However, when viewing online (desp ...
One of the buttons on my page is added dynamically using mustache. It has a specific class assigned to it, but when I try to click on it, the JQuery method does not get executed. This is what my HTML looks like initially: <div id="layout"></div&g ...
I'm wondering how I can set the background of the whole webpage (the body) to an image. I'd like to add a subtle fade effect to avoid it being too overpowering. <style> body { background-image:url("{% static 'portfolio ...
In the process of developing a web application feature using JavaScript, I have come up with a simple plan: Place a button in the bottom left corner. The button should only become visible after scrolling begins. Upon clicking the button, a new window wil ...
Is there a way to control the height of a select dropdown list without changing the view using the size property? ...
Is there a way to create a column in the middle of an HTML table that fills the remaining space with a minimum width of 300px? Take a look at this JSfiddle for reference. HTML: <table> <tr> <td class="fixed-width">Fixed width col ...
I'm struggling with a project due to the poorly formatted code, making it almost impossible to read. Despite my attempts with various plugins and tools in VIM, Netbeans, Sublime Text 2, and Eclipse, the situation only seems to worsen. If anyone has ...
Link to JSFiddle I encountered an issue with JSFiddle and I am having trouble figuring out the root cause. My aim is to validate an input using a regex pattern for a person's name. $("document").ready(function() { function validateForm() { var ...
Here is a code snippet: <div id="uploadControl" class="fileUpload1"> <label for="uploadFile" id="labelId">Choose File</label> <input class="upload" type="file" id="uploadFile" /> ...
I've been trying to figure this out for hours, but I can't seem to get it right. My top menu has submenus that include a popup menu. In one of my popups, I need the container to have a maximum width of 170 pixels and all the items inside to wra ...