This is my HTML and CSS code I want to make the navigation bar responsive but the media query doesn't cooperate It doesn't make any difference. and #menu doesn't make any difference in the first place(display: none doesn't work) it also doesn't work under media query. I can't figure out why, please help me.
.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}
header .icons a:hover {
color: black;
}
#menu {
display: none;
}
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: black;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: white;
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}
<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>jj </title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header" >
<a href="#" class="logo">
<img src="images/logo.jpg" alt=""></a>
<nav class="navbar">
home
varieties
about us
contact us
</nav>
<div class="icons">
</div>
Add a head element with a meta tag at the beginning of your code so the website is properly rendered based on actual lower screen sizes (without this, websites tend to render in higher resolution sizes than the device actually is).
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I also cannot find where your header class is used in your html code so I got rid of most of the .header portions in your media queries to have the styling take effect.
#media(max-width:991px){
html{
font-size: 55%;
}
.header{
padding: 1.5rem 2rem;
}
}
#media(max-width:768px){
#menu {
display: inline-block;
}
.navbar{
position: absolute;
top:100px; right: 0;
background-color:#333;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.navbar a{
color:rgb(243, 215, 215);
display: block;
margin:1.5rem;
padding:.5rem;
font-size:2rem;
}
}
Basicly just exchange your nav with this template and it should work perfectly.
#media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}
#media(max-width:768px) {
.topnav {
display: inline-block;
}
}
.topnav {
background-color: gray;
overflow: hidden;
margin: 1px;
border-radius: 10px;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
background-color: light-gray;
color: red;
transition: 1s;
}
.topnav a.active {
background-color: red;
color: white;
border-radius: 10px;
}
<div class="topnav">
home
varieties
about us
contact us
</div>
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!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">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere.
That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-color: var(--color-dark);
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--color-dark);
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<img src="images/landingpage_picture.jpg" alt="Landing Image" class="landing_image">
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)
You mean like this?? Just change your img its on the body.
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
background-size:cover;
background-repeat:no-repeat;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
.landing_image {
display:flex;
justify-content:right;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
I've been trying to make my nav (including the "works" dropdown button) responsive by making them appear through the usual three parallel lines on the top right margin that would then display what I've written on the nav bar when clicked from a mobile.
I've been trying for about two hours without a decent result.
I'm pretty sure it's not the hardest thing but I can't seem to get it right. Would love to understand how it works. Here's the desktop size, non-responsive navbar.
Here's the html:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="img/AURORA-YLOW-FIN.png" alt="logo"></div>
<div class="menu">
<ul>
<li>ALL</li>
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
<li>ABOUT</li>
<li>CONTACT</li>
<li><i class="fa fa-instagram"></li></i>
</ul>
</div>
</body>
</html>
and here is the CSS:
.wrapper{
width: 100%;
}
body{
margin: 0;
padding: 0;
background-color: black;
}
.header{
padding: 5px 0px;
display: inline-block;
width: 100%;
}
.header img{
max-height: 400px;
max-width: 550px;
margin-left: 60px;
margin-top: 30px;
}
.menu{
float: right;
position: relative;
display: inline-block;
top: -85px;
left: 0px;
margin-right: 70px;
}
.menu ul li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.menu ul li a{
text-decoration: none;
color:#F8E315;
font-family: Rajdhani, "sanf serif";
font-size: 15px;
padding: 5px 10px;
}
.menu ul li a:hover{
color:#C7C7C7;
}
.dropbtn {
background-color: black;
color: #F8E315;
padding: 14px;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
border: none;
}
.dropbtn:hover{
color: #c7c7c7;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #F8E315;
font-family: Rajdhani, "sans-serif";
font-size: 15px;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: black;
color: #c7c7c7;
}
.dropdown:hover .dropdown-content {
display: block;
}
A basic burger-menu can be achieved by doing the following steps:
1) Create a with the class of burger-menu as a previous sibling element of the navigation you want to hide on mobile screen width.
a) You dont want this to show on your desktop medias, so in the css, style it as display: none;
2) Create a media query for the desired device. Let's say 480px for a mobile device.
3) Within this media query, style the navigation that you want to appear on hover (or click) as display: none;
4) Within this media query, style your burger-menu. In my example, I've styled something very basic, for time reasons, but you can research using spans to make a responsive burger menu.
5) Within this media query, declare an on hover pseudo-class for your burger-menu which accesses the hidden navigation. Since you placed the burger-menu as a the previous sibling element of your navigation, you can use the + css rule to target it like so
.burger-menu:hover + .menu {
}
This means that, when you hover over the burger-menu, you will affect the css of .menu. You can place how .menu's styles will be affected in the above CSS selector.
Here is a basic example of how this process works with your code.
Add this to your html, before your .menu <div>
<div class="burger-menu"></div>
<div class="menu">
Add this to your css file, at the bottom
.burger-menu {
display: none;
}
#media (max-width: 480px) {
.menu {
display: none;
}
.burger-menu {
display: block;
background-color: white;
height: 30px;
width: 30px;
position: fixed;
top: 10px;
right: 10px;
}
.burger-menu:hover + .menu {
display: block;
}
}
Typically, you would advance this by using toggleClass with JQuery to add and remove display to your navigation menu on clicking the burger menu.
P.s the benefit of using spans to create your burger-menu will be when you want it to have nice animation, changing from a burger menu to a cross, or arrow, etc.
here is a solution with a responsive menu list. Now you should add this menu list to your project.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.menu li{
display: inline-block;
float: left;
line-height: 28px;
margin-top: 10px;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a, li {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
ALL
<div class="dropdown">
<button class="dropbtn">STUFF ▾</button>
<div class="dropdown-content">
PHOTOS
VIDEOS
POSTERS
</div>
</div>
ABOUT
CONTACT
<a href="https://www.instagram.com/auroracatera" target="_blank"> <i class="fa fa-instagram"></i>
</a>
☰
</div>
I hope you can do something with it and add it to your project ...
Can't get the hover on menu links to work. I'm using Xampp for local remote testing.
.menu ul>li a:hover{
color: blue;
font-size: 3rem;
}
I've tried different selectors, etc... nothing seems to work
here is the code:
* {
box-sizing: border-box;
}
html,
body {
color: #222;
font-size: 16px;
line-height: 1.4;
height: 100%;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
background-image: url("../images/header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.about {
background-image: url("../images/bellow_header.jpg");
height: 70%;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* here starts the styles for the NAvigation bar */
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important;
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: 'Pacifico', cursive;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0.5rem 1.5rem;
}
.active a {
color: #CC5200!important;
font-size: 1.7rem;
font-weight: 700;
}
.menu a {
font-size: 1.5rem;
font-weight: 500;
padding: 0.3rem;
text-decoration: none;
color: black;
}
/*by default on mobile the navigation isn't visible*/
.menu li {
display: none;
color: black;
}
.menu .icon {
order: 99;
display: block;
}
.menu.menuOpen {
position: fixed;
width: 80%;
left: 10%;
flex-direction: column;
background-color: #161415;
border-radius: 1rem;
margin: 0.5rem auto;
}
/*moving the icon to the top-right corner*/
.menu.menuOpen .icon {
position: absolute;
right: 0;
top: 0;
}
.menu.menuOpen li {
display: block;
text-align: center;
color: white;
}
/*tablets */
#media only screen and (min-width: 481px) {
/* Styles */
/*hidding the icon*/
.menu .icon {
display: none!important;
}
.menu li {
display: inline-block;
margin-left: 0.5rem;
}
.menu ul>li a:hover {
color: blue;
font-size: 3rem;
}
#logo {
margin-left: 2rem;
margin-top: 1rem;
display: inline-block;
text-align: left;
}
}
/*Landscape making the background look good */
#media screen and (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
/* Landscape styles */
header {
height: 120%;
}
}
/*laptops */
#media only screen and (min-width: 769px) {
/* Styles */
#logo {
display: inline-block;
position: relative;
top: 3rem;
left: 4rem;
}
}
/*large screens */
#media only screen and (min-width: 1025px) {
/* Styles */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>StyleTravel-Home</title>
<!-- Javascript -->
<script type="text/javascript" src="scripts/app.js"></script>
<meta name="description" content="StyleTravel is one of the most used services for booking HighEnd Sejours">
<meta name="keywords" content="Sejours,StyleTravel,HighEnd,Expensive,Exotic">
<meta name="author" content="Bogdan Mihalca">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- normalize -->
<link rel="stylesheet" href="css/normalize.css">
<!--layout styles -->
<link rel="stylesheet" href="css/layout.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<header>
StyleTravel
<nav class="menu" id="myMenu">
<ul>
<li class="active">Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li><i class="fa fa-search"></i>Search</li>
<li>
<a href="javascript:void(0);" class="icon" onclick="myResponsiveHamburger()">
<i id="hamb-icon" class="fa fa-bars"></i></a>
</li>
</ul>
</nav>
</header>
<div class="about"></div>
</body>
</html>
#logo {
font-size: 2.5rem;
text-decoration: none;
/* display: block !important; */
}
Your hover is absolutely fine but one mistake! display: block !important; this is what you put on and it is stretching and took all the visible width. So when you hovers over the links it's actually not hover over them! If you remove or unset the style it will work!
Though your hover is not looking great but it will hover if you remove the code! Here is my demo
#logo {
font-size: 2.5rem;
text-decoration: none;
display: block !important; /* Remove this ans code will work!*/
text-align: center;
color: black;
margin: 1rem auto 0 auto;
font-family: "Pacifico", cursive;
outline: 1px solid red; /* for demonestration */
background: #3333; /* for demonestration */
}
Just Remove the commented styles and it will be fine.
I am trying to apply a sticky footer but at the 769px media query it is breaking (won't stay at the bottom of the page). I am using Mobile-First Approach, I am not using Boostrap framework.
Do I need to apply other media queries before the footer will stick? I am trying to add the footer to the bottom of my page.
Am I missing something my CSS media query for 769px or am I missing something in my .main-footer in my CSS Layout Container section under my Base Layout Styles.
I have included my code. Thank you for help!
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px)
}
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>
Move min-height of .wrap class out of media query.
You need the minimum width both, when viewing the page on small and large screens.
Like that:
...
.wrap {
min-height: calc(100vh - 89px)
}
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;
}
...
Note that vh works only in very modern browsers (IE >= 11, Firefox >= 50) See this link for compatibility details: http://caniuse.com/#feat=viewport-units.
There are other ways to make an element stick to the bottom, without using calc and vh. This article describes several ways to do that: https://css-tricks.com/couple-takes-sticky-footer/
One of them (called "Negative margin on footer" in the article above) is to add a negative margin to the footer (equal to the height of the footer) and bottom padding to the element that wraps content above the footer (again equal to the height of the footer):
Quote from https://css-tricks.com/couple-takes-sticky-footer/: There is negative top margins on footers
This technique did not require a push element, but instead, required
an extra wrapping element around the content (the wrapping element that held everything except the footer) in which to apply
matching bottom padding to. Again to prevent negative margin from
lifting the footer above any content.
What needs to be changed in your CSS to use this technique:
...
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
...
Here is the whole code (HTML is same as yours):
/********************************
BASE STYLE ELEMENTS
*********************************/
/** {
border: 1px solid yellow;
}*/
* {
box-sizing: border-box;
}
.home-page {
background-image: url(http://images.natureworldnews.com/data/images/full/5375/hypervelocity-star.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000;
line-height: 1.6em;
font-family: 'Merriweather', serif;
}
.name {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.subname {
color: #91bfdb;
/*color: #9cb6d9;*/
font-family: 'Tangerine', cursive;
}
.p-header {
/*color: #e4d1a4;*/
color: #9cb6d9;
font-family: 'Tangerine', cursive;
}
a {
color: #e4d1a4;
/*color: #7D715D;*/
font-family: 'Merriweather', serif;
text-decoration: none;
}
li {
list-style: none;
}
/********************************
BASE LAYOUT STYLES
*********************************/
/*---- NAVIGATION ----*/
.name {
font-size: 2em;
}
.name {
margin-top: 87px;
margin-left: 20px;
}
.subname {
font-size: 2.45em;
margin-top: 78px;
padding-left: 32px;
}
/*.name,*/
.main-nav li {
margin-top: 35px;
margin-bottom: 2px;
text-align: center;
}
.main-nav a {
padding: 10px 10px;
text-align: center;
display: block;
}
.main-nav a:hover {
color: yellow;
}
/*---- LAYOUT CONTAINERS ----*/
.container {
padding-left: 1em;
padding-right: 1em;
}
.main-header {
text-align: center;
padding-top: 1.5em;
padding-bottom: 1.5em;
margin-bottom: 30px;
overflow: hidden;
}
.wrap {
padding-bottom: 150px;
}
.main-footer {
background: #cdd0d7;
padding: 2em 0;
text-align: center;
height: 150px;
margin-top: -150px;
}
/*---- PAGE ELEMENTS ----*/
/*============================
MEDIA QUERIES
==============================*/
#media (min-width: 769px) {
.container {
width: 90%;
max-width: 1150px;
margin: 0 auto;;
}
.main-nav {
float: right;
}
.main-nav li {
float: left;
margin-left: 5px;
}
.name {
float: left;
}
.clearfix {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>DevMagik</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/0f50f445ba.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="home-page">
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<a href="index.html" class="name">
<h1>Dev Magik</a></h1>
<ul class="main-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<p class="subname">
Web Development, Design, and Hosting</p>
</header>
</div> <!--End Wrapper-->
<footer class="main-footer">
<span>© 2016 DevMagik/Andrea M.</span>
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</footer>
</body>
</html>