Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aris Constantinou
2,687 PointsMy nav works great on mobile dimensions, but does not behave correctly for 1020px and above(Desktop)
I started a mobile first approach website and everything works ok on mobiles, but when i try to modify my nav code with media queries my nav does not behave like i want it to be.
For example in mobile view,my nav button "home" can be pressed while pressing the text or the whole button but it does not work in the desktop version. The code for the mobile version is in the framework.css but i created responsive.css so i can adjust tablet and desktop versions.
The problem is probably in the responsive.css with display:inline-block/block.
If anyone knows how to fix it please help me :)
My workspace: http://port-80-9lupmr5izv.treehouse-app.com/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/responsive.css">
<link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>NK Electrical LTD</title>
</head>
<body>
<header>
<div class="logo">
<img src="img/nklogo.png"alt="NK Logo">
</div>
<h1 class="name">NK ELECTRICAL LTD</h1>
<div class="info">
<p class="fb">Follow us on <a href="http://facebook.com/nkelectricalltd"><img src="img/fb.png"alt="Facebook Logo" class="social-icon"></a></p>
<p class="emergency">Emergency-call-number:2222222</p>
</div>
<a id="i-nav" href="#"></a>
<nav>
<ul>
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="electrical.html">Electrical Installations</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="appliances.html">Home Appliances</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="slider">
<img src="img/slider.jpg"alt="slider">
</div>
<section class="boxes">
<ul id="gallery">
<li>
<a href="img/electrical.png">
<img src="img/electrical.png" alt="">
<p>Electrical Installations</p>
</a>
</li>
<li>
<a href="img/lighting.png">
<img src="img/lighting.png" alt="">
<p>Lighting Decorations</p>
</a>
</li>
<li>
<a href="img/homeappliances1.png">
<img src="img/homeappliances1.png" alt="">
<p>Electrical Appliances</p>
</a>
</li>
<li>
<a href="img/homeappliances2.png">
<img src="img/homeappliances2.png" alt="">
<p>Kitchen Appliances</p>
</a>
</li>
</ul>
</section>
<section class="latest">
<h1>Our latest products</h1>
<ul id="galleryproducts">
<li>
<a href="img/1.jpg.png">
<img src="img/1.jpg" alt="">
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</ul>
</section>
</div>
<footer>
<p>© NK ELECTRICAL LTD 2016</p>
</footer>
</body>
</html>
///Framework.css
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
body{font-family: 'Electrolize', sans-serif;}
.container{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
overflow: hidden;
}
a{text-decoration: none;}
img{max-width: 100%;}
header{
float: left;
margin: 0 0 5% 0;
padding: 5px 0 0 0;
width: 100%;
}
.logo{text-align: center;padding:0;width:50%;margin:0 auto;}
nav{
display: none;
text-align: center;
padding: 1%;
background-color: #1c1c1c;
}
nav ul {
list-style: none;
margin: 0% 2%;
}
nav li {
background-color: #656565;
margin:5% 0% 5% 0%;
display: block;
}
nav a {
display: block;
color:white;
font-size:1.2em;
font-weight: 800;
padding: 5% 10%;
}
.slider{width:100%;padding: 0;margin: 0 auto;}
#gallery {
display: inline-block;
margin: 0% -2.7% 0% -2.7%;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #1c1c1c;
color: #bdc3c7;
}
#gallery li:nth-child(3n) {clear: left;}
#gallery li a p {
margin: 0;
padding: 6%;
font-size: 1.25em;
background-color: #483636;
color: #bdc3c7;
text-align:center;
}
#gallery img{padding:10%;}
#galleryproducts{
display: inline-block;
margin:0;
padding:0;
list-style: none;
}
#galleryproducts li{
float:left;
width:30%;
margin:0 10% 2% 10%;
}
#galleryproducts li:nth-child(3n) {
clear: both;
}
.latest{clear:both;background-color:#1c1c1c;}
.latest h1{color: white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;}
#galleryproducts img{border:3px solid white;}
.slider{clear:both;}
footer{clear:both;text-align: center; margin-top:5%;padding:3.1%;background-color:#1c1c1c;}
footer p{color:white;font-size:0.8em;font-weight: 900;}
.name{font-size: 1.3em;font-weight: 900;margin-bottom: 10%;text-align: center;}
.info{background-color: #605555;text-align: center;color:white;padding:5%;}
.fb{font-size:1.3em;}
.fb img {width:8%;}
.emergency{margin-top:5%;font-size:1.em;}
.show{margin-top:3%;display: block !important;}
#i-nav{
cursor: pointer;
margin:0 auto;
margin-top:5%;
display: block;
text-align: center;
width:44px;
height:44px;
background-image: url("../img/ham.png");
background-repeat: no-repeat;
background-size: 100% 100%}
///Responsive.css
/*@media screen and (min-width: 480px) {}
@media screen and (min-width: 660px) {}*/
@media screen and (min-width: 1020px) {
#i-nav{
display: none;
}
nav{
display: block;
}
nav ul{
margin:0 auto;
}
nav li{
display: inline-block;
margin:0%;
padding:2%;
}
nav a{
display: block;
padding:0%;
}
}