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.
Related
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>
I have an unordered vertical list as a navigation bar that is changing to a horizontal list on mobile devices. How do I prevent the list from switching to vertical and stay horizontal within the div element it's in.
Side note: the resulting code snippet is showing the list as vertical, but I suspect it's because the window is being perceived as mobile given it's width
Edit: there also appears to be a small scrollable gap to the right of the screen on mobile.
body {
background-color: #E5E5E5;
}
#nav_bar {
background-color: #2F2F2F;
height: 60px;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
#nav_logo {
background-image: url('../img/nav_logo.png');
width: 250px;
height: 40px;
top: 15%;
left: 10%;
position: absolute;
}
#media (max-width: 629px) {
div#nav_logo {
background-image: url('../img/nav_logo_mobile.png');
width: 60px;
height: 39px;
}
}
ul.nav {
list-style-type: none;
left: 70%;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
}
li.nav {
float: left;
}
li.nav a {
font-family: 'Roboto Condensed', sans-serif;
display: block;
color: white;
text-align: center;
padding: 18px;
text-decoration: none;
}
li.nav a:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|PT+Sans" rel="stylesheet">
</head>
<body>
<div id="nav_bar">
<div id="nav_logo"></div>
<ul class="nav">
<li class="nav">HOME</li>
<li class="nav">CONTACT</li>
<li class="nav">ABOUT</li>
</ul>
</div>
</body>
</html>
I think the problem is with "left: 70%". On mobile devices the space is just not enough to keep the links in a line.
Give them more space on small screens. I would recommend to set the right value instead of left, btw. On small screens you could just set it to right: 0.
I found some code on w3schools and tried to implement it in your code. This is what I came up with:
ul.nav {
position: relative;
overflow: hidden;
background-color: #333;
}
li.nav {
float: left;
}
li.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
I'm facing issue for responsiveness using DreamWeaver 2017.
The CSS for the logo :
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
Upon trying out the responsiveness :
I'm aware i'm using margin left which caused it.
The objective is to adapt both site and mobile site like this :
Also, if you observed even the input box also indent to the right..
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
I'm looking on other method than padding or margin.
Any critic/suggestion is welcome.
HTML codes:
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo"/>
<font color="black" class="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder="Quick Search for any city or
street in Japan" style="border:none;"/>
</div>
</div>
</header>
Codepenio : https://codepen.io/jayvicious/pen/xrxbZz
There is a lot going on here that we can look at. One thing others have commented on is that your HTML needs cleaned up. Make sure that IDs are truly unique, and that each opening tag has a closing tag (except for self-contained elements, like images and inputs).
You could also stand to use some wrapping elements to help you contain the main areas of your header: the logo, the nav items, and the search.
From there, to help with responsiveness, I would recommend using percentages for your widths whenever possible, instead of absolute units like centimeters. This will help your display flex a little bit at bigger screen sizes. At some point, though, you'll need to just redo the layout because the screen will be too wide to fit all your elements in one line. That's where media queries come into play.
Media queries will let you override a base style when the screen is smaller (or larger) than a certain width. For example, we could set the body to be blue normally, then change to red on smaller screens:
body {
background-color: blue;
}
#media all and (max-width: 800px) {
body {
background-color: red;
}
}
Another thing we can do to tidy things up and make our life easier is to use classes when possible. The nav items are a good use case for this: most of their styles will be shared. We can give them each an ID just in case, but we may not even need to use all those IDs.
Edit: Another tidying opportunity I meant to mention is that the use of the <font> tag is deprecated as of HTML5, so you should avoid that in your HTML. I removed it from the HTML in my snippet below. (End edit.)
A final thing you can do is make the little triangles next to the nav items with HTML and CSS instead of as images. (You could also do these purely in CSS using pseudo elements.)
Here is a demo where I've cleaned up your HTML quite a bit and then heavily revised the CSS to look more like what's in the pictures you provided. I have used placeholder images with my best guess at their real sizes based on the picture. You'll see that as you resize the screen, the media queries kick in to make the header get taller and to center things in the middle of the screen.
I've also forked your Pen on CodePen.
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
body {
margin: 0;
}
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
background-color: #73A7D1;
font-size: 14px;
font-style: normal;
font-weight: 400;
width: 100%;
height: 80px;
}
#header-wrapper {
width: 80%;
margin: 0 10%;
padding-top: 15px;
}
#logo, nav, #search {
float: left;
}
#logo {
width: 110px;
height: 50px;
}
nav {
width: 60%;
}
#search {
width: 200px;
}
.menu-item {
display: inline-block;
margin: 0 2.5%;
height: 30px;
color: black;
max-width: 100px; /* forces "sign in/register to break at <wbr> tab */
text-align: center;
}
#menu2 {
position: relative; /* bump "sign in/register" down a bit */
top: 7px;
}
.triangle-down { /* dropdown arrows next to nav links */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
display: block;
float: right;
margin-top: 5px;
margin-left: 3px;
}
#search img, #search input {
float: left;
height: 30px;
}
#search img {
margin-right: 5px;
}
#search input {
width: 150px;
}
#media all and (max-width: 980px) {
header {
height: 160px;
}
#logo, nav, #search {
float: none;
margin: 0 auto;
}
nav {
width: 100%;
text-align: center;
}
}
#media all and (max-width: 550px) {
header {
height: 200px;
}
}
<header>
<div id="header-wrapper">
<div id="logo"><img src="http://placehold.it/110x50" alt="sojologo"></div>
<nav>
<div class="menu-item" id="menu1">ABOUT<span class="triangle-down"></span></div>
<div class="menu-item" id="menu2">SIGN IN/<wbr>REGISTER</div>
<div class="menu-item" id="menu3">PROMOTIONS</div>
<div class="menu-item" id="menu4">TRAVEL<span class="triangle-down"></span></div>
</nav>
<div id="search">
<img src="http://placehold.it/30x30"/>
<input placeholder="Quick Search for any city or street in Japan" />
</div>
</div>
</header>
well FreedomPride
you can specify different properties for every class in each size of screens
you can use media query in this situation.
for example :
#media only screen and (max-width: 480px) {
.menu2 {
margin-left:20px;
}
}
as you see here I changed the margin in small screens 480px wide to 20px
and you can use it for each size
320px
480px
720px
1200px
you may get more information for mediaquery from here :
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
here's example of how we can do it :
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
/*header*/
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-style: normal;
font-weight: 400;
}
#menu1 {
display: inline-block;
margin-left: 3cm;
margin-right: auto;
height: 30px;
}
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
/* Logo placeholder*/
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#logodropdown {
margin-left: 0px;
border: none;
background-color: rgba(255,255,255,1.00);
}
/* div for Links in header */
#headerLinks {
float: left;
width: calc( 100% - 139px );
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(255,255,255,1.00);
}
/* Links in header */
#imgContainer{
float:left;
}
#headerLinks a {
text-decoration: none;
color: rgba(146,146,146,1.00);
padding-left: 66px;
font-size: 14px;
}
/* Offer text banner*/
#offer {
font-family: 'Montserrat', sans-serif;
clear: both;
background-color: rgba(246,246,246,1.00);
color: rgba(146,146,146,1.00);
padding-top: 57px;
padding-bottom: 57px;
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1280px) {
#logo {
margin-left:30px;
}
#menu1 {
margin-left:35px;
}
.menu2 {
margin-left:20px;
}
.menu2 input {
max-width:300px;
}
}
#media only screen and (max-width: 992px) {
#logo {
margin-left:25px;
}
#menu1 {
margin-left:25px;
font-size:18px;
}
.menu2 {
margin-left:15px;
font-size:14px;
}
.menu2 input {
max-width:250px;
font-size:11px;
}
#media only screen and (max-width: 720px) {
#logo {
margin-left:10px;
}
#menu1 {
margin-left:10px;
font-size:13px;
}
.menu2 {
margin-left:5px;
font-size:10px;
}
.menu2 input {
max-width:150px;
font-size:10px;
}
}
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo">
<font color="black" id="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder=" Quick Search for any city or street in Japan" style="border: none;"/>
</div>
Notice: This isn't the best practice. but for more efficient you have to use any grid system or framework like bootstrap, foundation or uikit.
I think you should check for media rules to get full responsiveness in any width/height you want.
So I'm trying to recreate the following layout for a lab: http://i.imgur.com/T24vvGu.jpg
I've started by tackling the navigation bar. I set the position to absolute so I can give it a top: 50px; property to move it down 50px from the top.
I tried to then set the logo's position to relative, so that relative to the navigation bar, I can move it 20px from the left or so. But when I use relative positioning, the logo sits inside of the navigation bar and makes the navigation bar's height bigger.
I thought that by setting the logo's position to relative, it would treat the logo as if it's not a part of the navigation bar. However, that's not the case. So what I did was I also set the logo's position to absolute. This entire thing is just killing my soul. For some reason I can't wrap my head around how to do this.
I went to web archive, and looked up spigot design's website. What they did, was they set the navigation bar's position to fixed, and the logo to relative. I tried doing this as well but the logo would still sit inside the navigation bar and extend it's height.
Furthermore, I have to set the logo to sit in the middle of the navigation bar when the browser is 768px and below. And then, two menu links sit to the left of the logo, and the other two menu links sit to the right of the logo. I'm completely lost at how to do this. I don't think I'd have a problem with the rest of the layout. It's just this navigation bar and logo positioning that's driving me insane.
Here is my code: http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323
Should I upload my code with the logo images as well? That may make it easier to follow. I'm not sure what the best practice is as I'm new to stack overflow.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lab Eight</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar left -->
<div class="navbar">
<div id="logo"></div>
<div class="container">
<ul class="float-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="column-twelve">
</div>
<div class="column-twelve">
</div>
</div>
</div>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #332929;
}
#logo {
background: url('images/logo-left.png');
display: block;
width: 250px;
height: 100px;
position: absolute;
left: 15px;
top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
color: #f2f2f2;
}
.column-twelve h2 {
font-size: 1.875em;
}
.row .column-twelve p {
color: #f2f2f2;
font-weight: 400;
font-size: 0.875em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
width: 90%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.navbar {
position: absolute;
width: 100%;
min-height: 58px;
top: 50px;
background: #fefefe;
}
.navbar li {
position: relative;
display: inline;
list-style: none;
}
.navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
/* The row for the columns. */
.row {
margin-right: -15px;
margin-left: -15px;
}
.column-twelve {
width: 100%;
}
.column-eleven {
width: 91.66666667%;
}
.column-ten {
width: 83.33333333%;
}
.column-nine {
width: 75%;
}
.column-eight {
width: 66.66666667%;
}
.column-seven {
width: 58.33333333%;
}
.column-six {
width: 50%;
}
.column-five {
width: 41.66666667%;
}
.column-four {
width: 33.33333333%;
}
.column-three {
width: 25%;
}
.column-two {
width: 16.66666667%;
}
.column-one {
width: 8.33333333%;
}
#media screen and (max-width: 768px) {
#logo {
position: absolute;
margin: 0 auto;
background: url('images/logo-center.png');
height: 146px;
width: 250px;
}
}
Here you go: http://codepen.io/n3ptun3/pen/avrXaE?editors=110
To complete this, I positioned the #navbar relative to its normal position. Then I absolutely positioned the #logo and #container (from their first positioned ancestor element, i.e. #navbar.)
The height issue comes from setting min-height: 58px; on .navbar. Instead, you want to use height: 58px;.
FYI--when using media queries, it is best practice to write your code mobile first. This means writing your code for the smallest screen first. In order to do this, you must use min-width instead of max-width. Also, you want to use #media only screen, instead of #media screen. This targets only browsers that can understand media queries.
Hope this helps. Feel free to ask any questions about the code in the comments section.
HTML
<div id="page">
<div id="navbar">
<div id="logo"></div>
<ul id="container">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
#page {
height: 600px;
}
#navbar {
position: relative;
width: 100%;
height: 50px;
top: 75px;
background-color: #fefefe;
}
#logo {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #333;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
}
#container {
position: absolute;
top: 13px;
padding: 0;
margin: 0;
width: 100%;
}
#navbar li {
display: none;
}
#navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
position: relative;
left: 100%;
}
#media only screen and (min-width: 569px) {
#navbar li {
display: inline-block;
list-style: none;
width: 20%;
float: left;
text-align: center;
}
}
#media only screen and (min-width: 769px) {
#logo {
left: 50px;
transform: translate(0);
}
#container {
width: 30%;
right: 50px;
}
#navbar li {
width: 25%;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
left: 0;
}
}
EDIT:
In response to your additional questions:
:nth-child() is a pseudo-class selector. It selects the child that is the desired ordinal (i.e. 1st, 2nd, 3rd, 4th, 5th, etc.) of its parent. The ordinal is designated by the number in parentheses. So if you look at my code, you'll see li:nth-child(3). This means: select all li elements that are the 3rd child of their parent. If the 3rd child isn't an li element, it will NOT be selected.
In regards to your media query question: The reason I placed the left: 50%; transform: translate(-50%); code outside of the media query, is because I'm using the mobile first method of coding. Mobile First design is the current standard for responsive design. It means that you are designing for the smallest screen (mobile) first. So, I am centering the logo, and removing the text links, outside of the media query. Then I target the tablet in my first media query: #media only screen and (min-width: 569px). This targets screens that have a resolution of 569px or higher, and adds the text links in the nav bar. Finally, I use another media query: #media only screen and (min-width: 769px) to target larger screens (computers), with a screen size of 769px or higher. In this media query, I position the logo on the left and the text links on the right.
NOTE: In your code, you are using desktop first design. You are designing for the large screen first. Then you use media queries for smaller sizes. That's why your media query uses max-width. I'm using mobile first design. I am designing for the small screen first. Then I use media queries for larger sizes. That's why my media query uses min-width.
Hope this helps!
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.