So I currently have a navbar that is responsive to the size of the screen built with HTML & CSS only. But I want it to stick to the container and also remain responsive to different screen sizes. Is there anyway to do this with only HTML & CSS? I have included the responsive Navbar code in this post that I would to update and make sticky.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
```
You need position: fixed; and an actualy position like top: 0;.
But also you could use the position: sticky; property instead to avoid overlapping content, like the other answer mentioned. Here you can see the browser support which is pretty good for position sticky, but slightly worse than fixed.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: fixed;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
You can also use position:sticky; and top:0 in your first media query to keep the navbar in place at the top, even when you scroll. This will work better than position:fixed because the content won't slide up behind the header while you are at the top.
Edit - embedded code directly.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4caf50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: sticky;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
Related
I came across a problem on my HTML file. I'm fairly new to HTML, and as I was making a topbar for my static website here, I tried to add a hover to it, but it isn't working correctly, only at the "search" and "cart" buttons (and it kinda works at "contact us" too, but only at its right side) .
So, I'm not sure why the hovering doesn't work on all buttons, even though the topbar looks ok at first glance. Am I overriding something I shouldn't? This got me confused. Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#topBox {
height: 250px;
margin-top:-50px;
margin-left: auto;
margin-right: auto;
background: #cbe9f3;
border-radius: 15px;
}
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed;
color: white;
font-family: "Cute Aurora Regular";
}
.topnav {
overflow: hidden;
font-family: "Cute Aurora Regular";
background-color: transparent;
border: #c9c7c7 0.1px solid;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
border-left: none;
border-right: none;
}
.topnav a {
float: left;
color: #b47d50;
text-align: center;
margin-left: 27px;
padding: 14px 16px;
margin-right: -20px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
}
.topnav a:hover {
color: #ecb2ad;
}
.topnav a.search {
margin-left: 290px;
}
.topnav a.cart {
margin-left: 25px;
}
br {
display:none;
}
/* Desktop grande */
#media (min-width: 1025px) {
#topBox {
width:1000px;
}
#container {
font-size: 600%;
}
#containerBunny {
width: 250px;
margin-left: 550px;
margin-top: 150px;
}
.topnav {
width: 1000px;
}
}
/* Desktop pequeno */
#media (min-width: 769px) and (max-width: 1024px) {
#topBox {
width:750px;
}
#container {
font-size: 500%;
}
#containerBunny {
width: 200px;
margin-left: 460px;
margin-top: 170px;
}
.topnav {
width: 745px;
}
}
/* Tablets */
#media (min-width: 481px) and (max-width: 768px) {
}
/* Mobile */
#media (min-width: 320px) and (max-width: 480px) {
#topBox {
width:1000px;
}
#container {
font-size: 520%;
}
#containerBunny {
width: 250px;
}
br {
display: block;
}
}
</style>
</head>
<body>
<div id="topBox">
<div id="container">
<p>Bunny <br>Shop</p>
</div>
<img id="containerBunny" src="images/molangMilk.png" alt="">
</div>
<div class="topnav">
HOME
NEW
SALE
PRODUCTS
CONTACT US
<a class="search" href="#search">SEARCH</a>
<a class="cart" href="#cart">CART</a>
</div>
</body>
</html>
Two quick and lazy solutions are to add the following to the #topBox div:
pointer-events: none; will allow you to click "though" the div to the navbar
height: auto; will prevent the div from overlapping the navbar
The reason the rollover isn't working as expected is the #container & #containerBunny divs are covering the topnav div.
You can see the overlapping divs here
I recommend adding the Pesticide Chrome extension to help visualise your divs and make it easier to see what's going on.
Your element with the ID of "container" is overlaying your navigation buttons. It's not to do with your hover logic.
You need to adjust your layout so container no longer sits on top, as mouse events only propagate to the topmost element.
Assuming container is for holding your "Bunny Shop" header. I would suggest adjusting the height of this element. You will probably find that it doesn't need to use the "fixed" positioning, and can sit relative to it's parent component. Fixed sits an element absolutely, relative to the viewport itself.
Your container element overlap the topbar or navigation item due to you fixed the container.
chnage your code from
#container {
margin-left: 27px;
margin-top: 41px;
position: fixed; // remove it.
color: white;
font-family: "Cute Aurora Regular";
}
to
#container {
margin-left: 27px;
margin-top: 41px;
color: white;
font-family: "Cute Aurora Regular";
}
Now you can hover navigation.
Okay, I found a solution: with #media I'm accessing the image's width and the bar separately and it's working but is there any shorter way codewise?
I searched the internet for a solution but none of what I found helped me so far.
I'm trying to make my header to be responsive to the browser's width but it isn't working.
I tried to make just the image responsive or just the top bar but nothing works...
Any ideas?
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/>
</div>
</header>
and this is the css:
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
width: 100%;
text-align: center;
}
Try to change it into:
#media screen and (max-width:900px) {
.header {
width: 100vw; /* viewport width */
}
}
device-width is not correct value for width.
Use : <
meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
When you are working om Media Queries, You have to need change inherit property if you declare cascaded down.If you have set Backgruond images on the body, there is need a queries to cancel background images.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
It's not really clear what you want, but to get your image span the whole width in all sizes, you can add this rule:
.banner img {
width: 100%;
}
This will size the image within its container (which has 100% width, so eventually the image will span the width).
BTW: .banner is a DIV that will be 100% wide anyway, so you actually can erase the 100% width for .banner
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
}
.banner img {
width: 100%;
}
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" />
</div>
</header>
I'm having trouble aligning my navigation to the top left corner of my site. I know what the issue is, it's that it's in a div with display flex and justify content center. But I cant move it out of the div or it will be above the whole page.
I feel like this must be a simple fix, but I just can't think straight right now. So how could I fix this?
I tried creating a new div outside of the header and one inside but can't fix it.
Here's the site. Thanks
Edit: Forgot about position: fixed lol
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600" rel="stylesheet">
<title>Pink</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#-ms-viewport {
width: device-width;
}
header {
background-color: #fdd1d2;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
border: 4px red solid;
}
.nav {
padding: 1vw;
font-family: 'Crimson Text', serif;
border: 1px green solid;
height: 15vh;
}
.header {
line-height: 100vh;
background-image: url('header.jpg');
background-size: cover;
border: 4px blue solid;
margin-top: 25vh;
height: 50vh;
width: 50vw;
font-family: 'Crimson Text', serif;
font-size: 1.5vw;
/*color: #fdd1d2;*/
}
.text {
/*margin-top: -.75vh;*/
}
ul {
list-style: none;
}
a {
font-size: 1.5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
body {
overflow: hidden;
}
li {
list-style-type: none;
}
/* 6+Portrait */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
.text {
font-size: 3vw;
}
#-ms-viewport {
width: device-width;
}
a {
font-size: 5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<header style="
justify-content: space-between;
">
<div class="nav" style="
display: flex;
justify-content: normal;
">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="header" style="
width: 100%;
display: flex;
margin: 100px 300px;
">
<div class="text" style="
/* width: 100%; */
">
<h1>1080 Benchmarks </h1>
</div>
</div>
</header>
</body></html>
You could add this to the CSS for .nav
position: absolute;
left: 0;
That makes it independent from the rest - on small screens it might overlap, but for medium to large screens it's the easiest solution. (BTW: position: fixed has the same effect in this particular situation
Everything else would involve changing your HTML.
I have the webpage that I am working on. Everything about it works out properly in terms of responsiveness, however, only the footer doesn't work properly. I would like for the 3 sections of the footer to be displayed underneath each other when the screen is made smaller. Any help here is greatly appreciated. Check out my code below:
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Papia</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--- This is the path to the image that will display on mobile --->
<video poster="assets/backupimage.jpg" id="bgvid" playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/papia.webm">
<source src="assets/papia.mp4">
<source src="assets/papia.mov">
</video>
<div id="topLeft">
<img src="assets/papia-logo-secondary.svg">
</div>
<div id="topRight">
Find a table
</div>
<div id="logo">
<img src="assets/papia-logo-main.svg">
</div>
<div id="left">
<p>4:30pm - close (kitchen closes at 11pm)</p>
</div>
<div id="centre">
Facebook
Instagram
Twitter
</div>
<div id="right">
<p>64 Welfare Road, Cole Bay, Sint Maarten</p>
</div>
<!---
This is an option button that will pause the video background
<div>
<button>Pause</button>
</div>
--->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#left{
position: absolute;
float: left;
bottom: 0;
left: 20px;
color: white;
}
#centre{
position: absolute;
float: left;
margin-left: 40%;
bottom: 10px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
margin-left: 78%;
bottom: 0;
color: white;
}
#media screen and (max-width: 500px) {
div{display: block}
}
#media screen and (max-device-width: 800px) {
html { background: url(assets/backupimage.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
div{display: block}
}
I agree with hungerstar's comment - absolute positioning will make it needlessly difficult to make your webpage responsive. That being said, it can be done. You're already using #media screen and (max-width: 500px) syntax in your CSS but not using it to the full extent of its capabilities. Inside of the section marked for the max-width: 500px section, you have the opportunity to totally redefine your css for a browser window smaller than 500px. Inside those brackets, you can just redefine the CSS for your 3 divs.
#media screen and (max-width: 500px){
#left{
position: absolute;
float: left;
bottom: 200px;
left: 20px;
color: white;
}
#centre{
position: absolute;
left: 20px;
float: left;
bottom: 100px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
left: 20px;
bottom: 0;
color: white;
}
}
So this will check the width of your screen, and when it becomes smaller than 500px, this CSS will be applied and your 3 divs will be repositioned all the way to the left, stacked on top of each other (i made up positions for them arbitrarily (100 and 200 px from the bottom). You will need to redefine all this for the 800px-sized screen as well
Absolute positioning is a bad choice for page layout. Use floats or flexbox.
Float
main,
footer > div {
text-align: center;
font-family: Roboto, sans-serif;
}
main {
min-height: 300px;
color: #f1f1f1;
background-color: #333;
font-size: 2.5rem;
}
main strong {
text-decoration: underline;
}
footer > div:nth-child( 2 ) {
background-color: #eee;
}
#media ( min-width: 450px ) {
footer > div {
float: left;
width: 33.333%;
}
}
<main>
<strong>Floated</strong> footer sections.
</main>
<footer>
<div>One</div>
<div>Two</div>
<div>Three</div>
</footer>
Flexbox
main,
footer > div {
text-align: center;
font-family: Roboto, sans-serif;
}
main {
min-height: 300px;
color: #f1f1f1;
background-color: #333;
font-size: 2.5rem;
}
main strong {
text-decoration: underline;
}
footer {
display: flex;
flex-direction: column;
}
footer > div {
flex: 1;
}
footer > div:nth-child( 2 ) {
background-color: #eee;
}
#media ( min-width: 450px ) {
footer {
flex-direction: row;
}
}
<main>
<strong>Flex</strong> footer sections.
</main>
<footer>
<div>One</div>
<div>Two</div>
<div>Three</div>
</footer>
You are completely messing the layout with position:absolute
You need to do something like this:
#left {
float: left;
color: white;
}
#centre {
float: left;
clear: inherit;
min-width: 300px;
}
#right {
float: left;
color: white;
}
Here's the fiddle
I want to hide the menu only when the screen size 320px is ... Now the menu is always hidden and I need to call them.
when the screen size 320px is, then is ok, when i need to call #main-nav, but by default size must be visible
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
}
.main-header {
background: linear-gradient(#3F94BF, #246485);
padding: 5px;
text-align: center;
color: white;
text-shadow: #222 0px -1px 1px;
position: relative;
width: 100%;
transition: all 0.3s ease;
}
.page-wrap {
float: right;
width: 100%;
transition: width 0.3s ease;
}
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
.main-nav {
position: fixed;
width: 0;
height: 100%;
font-weight: bold;
background: linear-gradient(#3F94BF, #246485);
overflow: hidden;
transition: width 0.3s ease;
}
.content {
overflow: hidden;
padding: 20px 20px 20px 20px;
}
#close-menu {
display: none;
}
#open-menu {
display: block;
}
#main-nav:target {
width: 20%;
}
#main-nav:target + .page-wrap {
width: 80%;
.open-menu {
display: block;
}
.close-menu {
display: none;
}
.main-header {
width: 80%;
left: 20%;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
}
html
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="main-nav" id="main-nav">
Details
Adresses
Kontakt
</nav>
<div class="page-wrap">
<header class="main-header">
☰
close
<h1>VIGOUI</h1>
</header>
<div class="content">
It’s all about playing four quarters. I think we played well but the other team played well too. They took advantage of certain circumstances that arose. It’s a physical game.
</div>
</div>
</body>
</html>
First you need the media query (http://jsfiddle.net/3X8Tq/)
#media all and (min-width: 320px) {
#main-nav {
width: 20%;
}
.page-wrap {
width: 80%;
}
}
That works great for small windows, but for large screens the close button doesn't work. This is because the close button never worked. It only works because the CSS is only applying the open :target. So lets make the close button work. We have no open-menu or close-menu ids on the page, but you do have CSS for them.
See the HREF #main-nav points to the nav. there is no #close-menu id. Lets add one.
<div id="close-menu"></div>
And we'll put it before the nav. We will also add the css for #close-menu
#close-menu:target + #main-nav {
width: 0;
}
#close-menu:target ~ .page-wrap {
width: 100%;
left: 0;
}
Solution: http://jsfiddle.net/3X8Tq/1/
Looking at your css I believe you have a misunderstanding of how it works. The subclasses in your css only work with less css library. The #close-menu and #open-menu don't exist on the page. I suggest reading up on :target and css selectors in general.