I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
The background on this page isn't displaying and instead just shows the image i have set behind the background. Also I tried centering my table using the methods posted on other threads, but none of them worked for this specifically.
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a, article, audio, body, div, figcaption, figure, footer, header, h1,
h2, h3, img, li, nav, p, section, source, ul, video {
border: 0;
padding: 0;
margin: 0;
}
img, video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover, nav a:focus {
color: ivory;
}
nav ul, nav div, nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
color: ivory;
cursor: pointer;
}
#AboutUs {
color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
background: #7eccec;
background: url("images/bg.jpg");
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
float: left;
padding-right: 2%;
padding-bottom: 2%
margin-top: 20px;
}
.container {
min-width: 600px;
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background-color: darkblue;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes{
border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
clear: right;
float: left;
width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.Testimonial{
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.History {
clear: left;
float: right;
width: 47%;
}
.Olddude {
border-radius: 5px;
border: 1em solid #B8944D;
margin: 1em;
position: relative;
top: 10em;
}
.nonprofit1 {
width: 60%;
clear: left;
float: right;
}
.nonprofit {
margin: 1em;
float: left;
position: relative;
}
/* form styles */
form {
padding: 10px;
}
/* fieldsset styles */
fieldset {
margin-bottom: 0.8em;
}
fieldset fieldset {
margin-top: 1em;
padding: 0.8em;
border: 1px solid #777;
}
/* field styles */
.contactinfo input, #stay-nights, textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
}
select {
margin-bottom: 0.6em;
}
.contactinfo input {
position: absolute;
left: 5em;
}
.schedule input {
position: absolute;
left: 10em;
}
#nameinput, #emailinput {
width: 25em;
}
#phoneinput {
width: 12em;
}
#stay-nights {
width: 3em;
}
#submit {
border: none;
padding: 0.4em 0.6em;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* main content table */
th, td {
border: 1px solid black;
padding: 0.5em;
}
th {
background-color: lightblue;
}
.email {
background-color: ivory;
}
.name {
background-color: pink;
}
.degree {
background-color: orange;
}
/* Main Content CSS Table */
.table {
margin: 1em 0;
font-size: 1.3em;
display: table;
}
.row {
display: table-row;
}
.row div {
padding: 0.25em 0.5em;
display: table-cell;
}
.day {
font-weight: bold;
}
/* label styles */
label {
font-size: 1em;
line-height: 1.6em;
}
.contactinfo label {
display: block;
position: relative;
margin: 0.8em 0;
}
.services label, .method label {
margin-right: 1.6em;
}
.schedule p{
width: 9.2em;
float: left;
}
.date-picker label {
position: absolute;
left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
text-align: center;
font-size: .8em;
color: white;
}
/* print styles */
#media print {
body, h1, article, footer {
color: rgb(0,0,0);
background: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>WEB Managing Partners</title>
<!--
Winter, Edwards, and Boyd (WEB) main web page
Filename: index.html
Author: Justus Self
Date: 5/2/2017
A Giant Project that makes me really sad
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div class="container">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p class="skipnavigation">Skip navigation</p>
<header>
<h1><img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd"></h1>
</header>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul>
<li>Managing Partners</li>
<li>Company History</li>
<li>Community Involvement</li>
</ul>
<div class="fb-like" data-href="https://facebook.com/cengagebrain"
data-layout="button" data-action="like" data-size="small" data-show-faces="true"
data-share="false">
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</nav>
<article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
<br>
<table>
<colgroup>
<col class="name">
<col class="email">
<col class="degree">
</colgroup>
<thead>
<tr>
<th>Employee Name</th>
<th>E-mail</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike Edwards</td>
<td>medwards#webcpa.com</td>
<td>Certified Public Accountant</td>
</tr>
<tr>
<td>Julia Winters</td>
<td>jwinter#webcpa.com</td>
<td>Certified Financial Planner</td>
<tr>
<td>Regina Boyd</td>
<td>rboyd#webcpa.com</td>
<td> Certified Public Accountant </td>
</tr>
</tbody>
</table>
<br>
<br>
<footer>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<p class="copyright">ⒸJustus Self</p>
<p class="copyright"> CIS 130 – SP16</p>
</footer>
</article>
</div>
</body>
</html>
background property needs height and (max-)width just use the values you want and you are good to go.
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a,
article,
audio,
body,
div,
figcaption,
figure,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
section,
source,
ul,
video {
border: 0;
padding: 0;
margin: 0;
}
img,
video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* TABLE CENTER*/
table { margin:auto}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover,
nav a:focus {
color: ivory;
}
nav ul,
nav div,
nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
color: ivory;
cursor: pointer;
}
#AboutUs {
color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
float: left;
padding-right: 2%;
padding-bottom: 2% margin-top: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background: url("http://lorempixel.com/1600/900") no-repeat 0 0 / cover;
height: 100vh;
max-width: 100%;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes {
border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
clear: right;
float: left;
width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.Testimonial {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.History {
clear: left;
float: right;
width: 47%;
}
.Olddude {
border-radius: 5px;
border: 1em solid #B8944D;
margin: 1em;
position: relative;
top: 10em;
}
.nonprofit1 {
width: 60%;
clear: left;
float: right;
}
.nonprofit {
margin: 1em;
float: left;
position: relative;
}
/* form styles */
form {
padding: 10px;
}
/* fieldsset styles */
fieldset {
margin-bottom: 0.8em;
}
fieldset fieldset {
margin-top: 1em;
padding: 0.8em;
border: 1px solid #777;
}
/* field styles */
.contactinfo input,
#stay-nights,
textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
}
select {
margin-bottom: 0.6em;
}
.contactinfo input {
position: absolute;
left: 5em;
}
.schedule input {
position: absolute;
left: 10em;
}
#nameinput,
#emailinput {
width: 25em;
}
#phoneinput {
width: 12em;
}
#stay-nights {
width: 3em;
}
#submit {
border: none;
padding: 0.4em 0.6em;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* main content table */
th,
td {
border: 1px solid black;
padding: 0.5em;
}
th {
background-color: lightblue;
}
.email {
background-color: ivory;
}
.name {
background-color: pink;
}
.degree {
background-color: orange;
}
/* Main Content CSS Table */
.table {
margin: 1em auto;
font-size: 1.3em;
display: table;
}
.row {
display: table-row;
}
.row div {
padding: 0.25em 0.5em;
display: table-cell;
}
.day {
font-weight: bold;
}
/* label styles */
label {
font-size: 1em;
line-height: 1.6em;
}
.contactinfo label {
display: block;
position: relative;
margin: 0.8em 0;
}
.services label,
.method label {
margin-right: 1.6em;
}
.schedule p {
width: 9.2em;
float: left;
}
.date-picker label {
position: absolute;
left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
text-align: center;
font-size: .8em;
color: white;
}
/* print styles */
#media print {
body,
h1,
article,
footer {
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<body>
<div class="container">
<p class="skipnavigation">Skip navigation</p>
<header>
<h1>
<img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd">
</h1>
</header>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul>
<li>Managing Partners</li>
<li>Company History</li>
<li>Community Involvement</li>
</ul>
</nav>
<article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
<br>
<table>
<colgroup>
<col class="name">
<col class="email">
<col class="degree">
</colgroup>
<thead>
<tr>
<th>Employee Name</th>
<th>E-mail</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike Edwards</td>
<td>medwards#webcpa.com</td>
<td>Certified Public Accountant</td>
</tr>
<tr>
<td>Julia Winters</td>
<td>jwinter#webcpa.com</td>
<td>Certified Financial Planner</td>
<tr>
<td>Regina Boyd</td>
<td>rboyd#webcpa.com</td>
<td> Certified Public Accountant </td>
</tr>
</tbody>
</table>
<br>
<br>
<footer>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<p class="copyright">ⒸJustus Self</p>
<p class="copyright"> CIS 130 – SP16</p>
</footer>
</article>
</div>
So initially the top half of my black menu blocks appeared over the top of the banner, but now the top half of them are cut off underneath of the banner like this:
Here is my styles.css file:
/* Base */
* {
margin: 0;
padding: 0;
}
body {
/*background-color: #F5F4F1;*/
background-image: url('./img/bg.jpg');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #353535;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#banner {
position: relative;
}
#banner__text-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
#banner__title {
font-size: 5.8rem;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h1,h2,h3,h4,h5,h6 {
margin: 30px 0;
/*font-weight: 200;*/
color: #8ca757;
}
h1 {
font-size: 35px;
}
h1 small {
font-size: 25px;
color: #666;
}
h2 + p {
margin-top: -20px;
}
h3 + p {
margin-top: -20px;
}
h2,h3,h4 {
font-size: 30px;
}
h4.error {
color: #faa722;
}
h5,h6 {
font-size: 20px;
}
p {
margin: 0 0 20px;
}
a:link, a:visited {
color: #8ca757;
}
a:hover {
color: #7a9347;
}
ul, ol {
margin: 0 0 10px 18px;
}
ul li, ol li {
margin: 0 0 15px;
}
hr {
border: none;
height: 18px;
width: 114px;
background-image: url('./img/hr.png') center center no-repeat;
margin: 20px auto;
}
small {
font-size: 12px;
}
blockquote {
background: white;
padding: 10px;
margin: 0 0 15px;
border-left: solid 4px #d1cbb8;
font-style: italic;
}
blockquote p {
margin: 5px 0 10px;
}
blockquote code {
font-style: normal;
}
code {
color: #006699;
font-weight: bold;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
sup {
font-size: 0.6em;
}
/* Layout */
.wrapper {
position: relative;
width: 620px;
margin: 40px auto;
padding: 40px;
background: white;
text-align: center;
}
.wrapper:before, .wrapper:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
width: 100%;
height: 100%;
background: #97917e;
z-index: -1;
}
.wrapper:before {
top: 10px;
left: -10px;
background: #514933;
}
#logo {
width: 240px;
margin: 0 auto;
display: block;
}
.sandbox {
padding: 20px;
background: #f8f5f1;
text-align: left;
}
aside {
background: white;
border: dashed 2px #97917e;
padding: 10px 20px;
margin: 40px;
}
aside h3 {
font-size: 24px;
margin-top: 10px;
}
aside h6 {
margin: 15px 0 5px;
}
table {
width: 100%;
font-size: 13px;
background: white;
margin: 0 0 20px;
}
table td {
border-bottom: solid 1px #d1cbb8;
padding: 4px;
}
table th {
background: #8ca757;
color: white;
padding: 4px;
font-weight: normal;
font-size: 15px;
}
/* Global */
input {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
autton, input.button {
display: inline-block;
background: #ccc;
outline: solid 2px #ccc;
border: solid 2px white;
color: white;
padding: 10px 15px;
margin: 20px 0;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
.button:hover, input.button:hover {
background: #bbb;
outline-color: #bbb;
}
.button.prev {
float: left;
background: #514933;
outline-color: #514933;
}
.button.prev:hover {
background: #494331;
outline-color: #494331;
}
.button.next, input.button.next {
background: #8ca757;
outline: solid 2px #8ca757;
float: right;
}
.button.next:hover, input.button.next:hover {
background: #7c9745;
}
input.button.next {
display: block;
float: none;
width: 100%;
}
.block {
display: block;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.copyright-info h4, .copyright-info h5 {
margin: 0;
line-height: 18px;
font-size: 14px;
text-align: center;
}
.copyright-info h4 {
font-weight: bold;
}
.copyright-info {
margin: 20px 0 40px;
}
/* Final example website */
#final-example .wrapper {
width: 800px;
padding: 0;
}
#final-example .content {
padding: 20px 50px 50px;
text-align: left;
}
#final-example #nav {
margin: -27px 0 0;
}
#final-example #nav ul {
display: inline-block;
list-style: none;
text-align: left;
}
#final-example #nav ul li {
display: inline-block;
text-align: center;
margin: 0 10px;
}
#final-example #nav ul li a {
display: block;
background: #353535;
outline: solid 2px #353535;
border: solid 2px white;
color: white;
padding: 10px 15px;
text-decoration: none;
}
#final-example #nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
#final-example #philosophy {
text-align: center;
font-size: 18px;
line-height: 22px;
}
#final-example #footer {
font-size: 12px;
line-height: 15px;
margin: 60px 0 0 0;
}
#final-example #footer strong {
display: block;
margin: 0 0 20px;
}
#final-example .column {
display: block;
float: left;
}
#final-example .column.three {
width: 203px;
margin-right: 45px;
}
#final-example .column.last {
margin: 0;
}
#final-example small {
display: block;
text-align: center;
margin: 40px 0 0;
}
#final-example .member {
width: 203px;
float: left;
margin-right: 45px;
}
#final-example .member:last-child {
margin: 0;
}
#final-example .member img {
max-width: 100%;
}
#final-example .closed {
color: #d13916;
}
#final-example .open {
color: #67b512;
}
#menu-items ul {
list-style: none;
margin: 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
}
#menu-items ul li a {
text-decoration: none;
font-weight: bold;
}
.price {
float: right;
font-size: 18px;
font-weight: bold;
color: #353535;
}
#contact {
width: 320px;
margin: 0 auto;
}
#contact-form label {
display: block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
border: solid 2px #353535;
outline: none;
font-size: 18px;
padding: 10px;
margin: 0 0 10px;
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#contact-form textarea {
resize: vertical;
height: 120px;
}
#contact-form input[type="checkbox"] + label {
display: inline;
cursor: pointer;
}
When I try to do this:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
}
to this
#final-example #nav {
margin: -27px 0 0;
}
this happens:
and text-align:center; did not work. Any ideas?
Here is the index.php:
<!DOCTYPE html>
<html>
<head>
<title>MicroUrb</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="/" title="Return to Home">
<img src="assets/img/banner0.jpg" alt="MicroUrb">
<div id="banner__text-content">
<h1 id="banner__title">MicroUrb</h1>
</div>
</a>
</div><!-- banner -->
<div id="nav">
<ul>
<li>Home</li>
<li>Team</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div class="content">
<div id="footer" class="cf">
<div class="column three">
<strong>Phone</strong>
609.505.3395
</div><!-- column -->
<div class="column three">
<strong>Location</strong>
<!-- location to go here -->
</div><!-- column -->
<div class="column three last">
<strong>Hours</strong>
<em>Tuesday - Thursday</em><br>
1:00pm - 9:00pm<br><br>
<em>Friday and Saturday</em><br>
4:00pm - 11:00pm<br><br>
<em>Sunday - Monday</em>
Closed<br><br>
</div><!-- column -->
</div><!-- footer -->
<small>©2017 MicroUrb</small>
</div><!-- content -->
</div><!-- wrapper -->
<div class="copyright-info">
<?php includes('../assets/includes/copyright.php'); ?>
</div><!-- copyright-info -->
</body>
</html>
Put a z-index on the nav and set the position to relative
#final-example #nav {
margin: -27px 0 0;
z-index: 5;
position: relative;
}
I believe to get the navigation in front of the banner like you are trying to achieve you could utilise the z-index property.
Add a z-index of 1 to your #final-example #nav {} and a z-index of 0 to your #banner {} which will bring the navigation in front of the banner while keeping its absolute positioning in the centre.
The final outcome will be:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
z-index: 1;
}
#banner {
position: relative;
z-index: 0;
}
Let me know if you need any other help.
You can use z-index on the nav element to make it appear above the banner if you set the banner to a lower z-index compared to the nav element.
So for example:
#final-example #nav {
z-index:1;
position:relative;
margin:-27px auto 0;
}
That said, it would be useful if you would've posted your html part as well.
Edit:
Further investigation and with a temporary asset, the code seems to work fine with the code posted above as can be seen in this JSFiddle: https://jsfiddle.net/t2d70q3y/2/
Let me know if you require further assistance.
I am trying to display a facebook like box on the sidebar of my website. Yet when I put the code in, nothing appears. I have tried moiving the code to different spots and still nothing appears. I am not sure what I am doing wrong. Thanks in advance. Here is the code.
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Kustum Kostumes</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="page">
<div id="header">
<div class="background">
<h1 id="logo"> <img src="images/Banner1.jpg" alt="Logo" /> </h1>
<div id="navigation">
<ul>
<li class="selected">
<li>
Home
</li>
<li>
Services
</li>
<li>
Gallery
</li>
</ul>
</div>
</div>
</div>
<div id="contents">
<div id="blog">
<div id="sidebar">
<div class="section">
<div class="fb-page" data-href="https://www.facebook.com/kustumkostumes" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/kustumkostumes" class="fb-xfbml-parse-ignore">Kustum Kostumes</blockquote></div>
<ul class="posts">
<li>
<span class="time">.</a>
</li>
<li>
<span class="time"></a>
</li>
<li>
<span class="time"></a>
</li>
</ul>
</div>
<div class="section">
<h5></h5>
<ul>
</ul>
</div>
</div>
<div id="main">
<h3>Welcome to Kustum Kostumes</h3>
<p> We aim to provide high quality, handmade and crafted kostumes, props, sculptures, and artwork!<br> We put in a lot of time and effort into what we produce to make sure that not only is the client <br>happy but it looks as close as possible to the source material. </p><p>Please check out the services page to see a detailed list of what we have to offer <br>and the approximate prices for each. Please use the Gumtree links on the side <br>for what we currently have for sale. Alternatively, contact us for anything you have in mind.<br> Don't forget to like us on facebook for continual updates.
</p>
<img src="images/bg-header2.jpg" alt="Img" height="325" width="547">
</div>
<div class="footer">
</div>
</div>
</div>
<div id="footer">
<div class="background">
<div class="body">
<form action="contact.php" method="post" id="message" class="section">
<h3>Send a Message</h3>
<ul>
<li>
<label>Full Name:</label>
<input type="text" value="">
</li>
<li>
<label>Email:</label>
<input type="text" value="">
</li>
<li>
<label>Message:</label>
<textarea></textarea>
</li>
<li>
<input type="submit" value="Send">
</li>
</ul>
</form>
<div class="section">
<h3>Contact Us</h3>
<ul>
<li>
<span>Phone</span><strong>:</strong>
<p>
0450101551
</p>
</li>
<li>
<span>Email</span><strong>:</strong>
<p>
kustumkostumes#gmail.com
</p>
</li>
<li>
<span>
</li>
</ul>
</div>
<p id="footnote">
© Copyright 2017. All rights reserved. ABN 78 820 831 193
</p>
</div>
</div>
</div>
</div>
CSS Stylesheet
/* Website template by freewebsitetemplates.com */
#font-face {
font-family: 'DaysOne-Regular';
src: url('../fonts/DaysOne-Regular.eot');
src: local('☺'), url('../fonts/DaysOne-Regular.woff') format('woff'), url('../fonts/DaysOne-Regular.ttf') format('truetype'), url('../fonts/DaysOne- Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: url(../images/bg-body.jpg) repeat left top;
font-family: Arial, Helvetica, sans-serif;
min-width: 960px;
margin: 0;
}
.background {
background: url(../images/bg-pattern-red.jpg) repeat left top;
}
#page {
width: 960px;
margin: 0 auto;
padding: 156px 0 0;
}
img {
border: 0;
}
/*------------------------------ SPRITES ------------------------------*/
#footer ul li a {
background: url(../images/icons.png) no-repeat;
}
#message input[type='submit'], .more {
background: url(../images/bg-buttons.png) no-repeat;
}
.more {
background-position: 0 -35px;
color: #636974;
display: inline-block;
font-size: 14px;
font-weight: bold;
height: 35px;
line-height: 35px;
width: 170px;
padding: 1px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.more:hover {
background-position: 0 -82px;
color: #010000;
}
/*------------------------------ HEADER ------------------------------*/
#header {
width: 100%;
border-bottom: 5px solid #c3c3c3;
position: absolute;
left: 0;
top: 0;
}
#header .background {
height: 150px;
border-bottom: 1px solid #b6051c;
}
/** Logo **/
#logo {
font-family: 'DaysOne-Regular';
font-size: 36px;
font-weight: normal;
line-height: 130px;
width: 960px;
margin: 0 auto;
}
#logo a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
/** Navigation **/
#navigation {
background: url(../images/bg-navigation.png) no-repeat;
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
top: 0;
}
#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;
}
#navigation li {
float: left;
}
#navigation li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#navigation li a:hover, #navigation li.selected a {
background-color: #bebcbc;
color: #2e3a54;
border-color: #afafaf;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
background: #fff url(../images/bg-content-bottom.png) no-repeat left bottom;
display: inline-block;
width: 100%;
margin-bottom: 30px;
padding: 23px 0 0;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#contents h1, #contents h2, #contents h4, #contents h5, #contents h6 {
color: #2e3a54;
font-family: "DaysOne-Regular";
font-size: 36px;
font-weight: normal;
margin: 0 0 18px;
}
#contents h2 {
font-size: 24px;
line-height: 24px;
text-transform: uppercase;
}
#contents h4 {
font-size: 16px;
line-height: 24px;
margin: 0 0 12px;
text-transform: uppercase;
}
#contents h5 {
font-size: 14px;
line-height: 24px;
margin: 0;
text-transform: uppercase;
}
#contents h5 a {
color: #940315;
text-decoration: none;
}
#contents h6 {
font-size: 12px;
line-height: 24px;
text-transform: uppercase;
}
#contents p {
color: #636974;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
}
#contents p a {
color: #636974;
}
#contents p a:hover {
color: #721f29;
}
#contents h5 a:hover {
text-decoration: underline;
}
#contents .footer {
background-color: #f8f8f8;
clear: both;
width: 900px;
margin: 0 0 4px -30px;
padding: 20px 30px 0;
}
#contents .footer h6 {
float: left;
width: 210px;
margin-bottom: 30px;
margin-right: 20px;
text-transform: uppercase;
}
#contents .section {
width: 260px;
padding: 0 0 0 20px;
}
#contents > div:first-child {
padding: 48px 30px 24px;
}
.time {
color: #636974;
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 0 5px;
}
/** adbox **/
#contents #adbox {
background: url(../images/bg-adbox-bottom.png) no-repeat left bottom;
padding: 0 0 19px;
position: relative;
}
#adbox > div {
background-color: #f0f0f0;
height: 390px;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
padding-right: 20px;
}
#adbox > div:after {
clear:both;
content:"";
display:block;
height:1%;
line-height:0;
visibility:hidden;
}
#adbox h1 {
padding-top: 18px;
}
#adbox h4 {
font-size: 14px;
}
#adbox img {
float: left;
margin-right: 20px;
}
/** Sidebar **/
#contents .sidebar {
float: left;
min-height: 490px;
width: 279px;
border-right: 1px solid #f2cc3d;
margin: -19px 40px 0 30px;
padding: 20px 0 0;
}
#contents .sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#contents .sidebar ul li {
font-size: 14px;
line-height: 24px;
margin: 0 0 24px;
}
#contents .sidebar ul span {
color: #636974;
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 0 5px;
}
#contents .sidebar ul li a {
color: #636974;
text-decoration: none;
}
#contents .sidebar ul li a:hover {
text-decoration: underline;
}
#sidebar, .highlight {
float: right;
display: inline-block;
border-left: 1px solid #f2cc3d;
margin: 0 0 24px 19px;
}
#sidebar .section {
border-top: 1px solid #f2cc3d;
padding-top: 24px;
}
#sidebar .section:first-child {
border: 0;
padding-top: 0;
}
#sidebar .section ul {
color: #636974;
font-size: x-small;
margin: 0 0 24px;
padding-left: 12px;
}
#sidebar .section ul li {
padding-left: 10px;
}
#sidebar .section ul li > a {
color: #636974;
display: block;
font-size: 14px;
line-height: 24px;
text-decoration: none;
}
#sidebar .section ul li a:hover {
text-decoration: underline;
}
/** list **/
ul.list {
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
ul.list li h5 + img {
float: left;
margin-right: 20px;
margin-top: 6px;
}
/** Main **/
#main > ul {
display: inline-block;
list-style: none;
width: 580px;
margin: 0;
padding: 0;
}
#main > ul li {
float: left;
width: 290px;
}
#main > ul li p b {
color: #2e3a54;
display: block;
font-family: 'DaysOne-Regular';
font-weight: normal;
text-transform: uppercase;
}
/** About **/
#contents #about {
padding-bottom: 0;
padding-top: 48px;
}
#about #main img {
margin-bottom: 18px;
}
#about .footer p {
font-size: 12px;
}
/** Services **/
#contents #services {
display: inline-block;
width: 900px;
}
#services #sidebar {
min-height: 620px;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
width: 100%;
border-top: 5px solid #c3c3c3;
position: absolute;
left: 0;
}
#footer .background {
border-top: 1px solid #b6051c;
}
#footer .body {
width: 960px;
margin: 0 auto;
padding: 40px 0 20px;
}
#footer .section {
float: left;
display: inline-block;
width: 460px;
margin: 0 10px 24px;
}
#footer h3 {
color: #fff;
font-family: 'DaysOne-Regular';
font-size: 18px;
font-weight: normal;
line-height: 18px;
margin: 0 0 18px;
text-transform: uppercase;
}
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer ul li {
color: #b3999c;
display: inline-block;
font-size: 14px;
line-height: 24px;
width: 100%;
border-top: 1px solid #8a0413;
padding: 12px 0 0;
vertical-align:top;
}
#footer ul li:first-child, #footer #message ul li {
border: 0;
padding: 0;
}
#footer ul li span {
float: left;
display: inline-block;
width: 70px;
vertical-align:top;
}
#footer ul li strong {
float: left;
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
#footer ul li p {
float: left;
display: inline-block;
width: 370px;
margin: 0;
padding: 0 0 12px;
}
#footer ul li a {
color: #b3999c;
display: inline-block;
height: 22px;
width: 30px;
margin: 0 10px;
text-decoration: none;
}
#footer ul li a.twitter {
background-position: -40px 0;
}
#footer ul li a.facebook {
background-position: -40px -32px;
}
#footer ul li a.googleplus {
background-position: -40px -64px;
}
#footer ul li a.twitter:hover {
background-position: 0 0;
}
#footer ul li a.facebook:hover {
background-position: 0 -32px;
}
#footer ul li a.googleplus:hover {
background-position: 0 -64px;
}
/** message **/
#message label {
float: left;
color: #b3999c;
display: inline-block;
font-size: 14px;
line-height: 30px;
width: 96px;
margin-right: 10px;
text-align: right;
}
#message input[type='text'] {
color: #636974;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 35px;
line-height: 35px;
width: 342px;
border: 1px solid #d7d7d7;
margin: 0 0 11px;
padding: 0 4px;
}
#message textarea {
color: #636974;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 95px;
line-height: 24px;
width: 342px;
border: 1px solid #d7d7d7;
margin: 0 0 4px;
padding: 0 4px;
overflow: auto;
resize: none;
}
#message input[type='submit'] {
background-position: 0 0;
color: #636974;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 25px;
line-height: 25px;
width: 52px;
border: 0;
margin-left: 106px;
padding: 0;
}
#message input[type='submit']:hover {
background-position: -62px 0;
color: #2e3a54;
}
#footnote {
clear: both;
color: #b75661;
font-size: 12px;
margin: 0;
text-align: center;
}
I have a problem with my responsive menu and I can't figure out where is it.
It's hard to explain so go to my website http://untruste.altervista.org/home.html
Now resize the windows since you get the responsive version, open the menu and the close it.
Resize the window since you get the desktop version, as u can see the menu disappeared! (If you refresh the page it comes back)
desktopstyle:
header {
padding-bottom: 2%;
border-radius: 10px;
width: 70%;
margin: auto;
}
#headerTitle h1{
display: block;
}
#headerTitle {
padding-top: 1%;
text-align: center;
line-height: 1.8em;
}
header img {
display: block;
margin: 2%;
width:7em;
}
header h1 {
width: 80%;
margin: auto;
font-size: 1.8em;
letter-spacing: -0.04em;
}
header h2 {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5em;
letter-spacing: -0.06em;
}
#menu {
display: block;
width: 80%;
margin: auto;
border:none
}
#menu ul li {
display: inline-block;
width:auto;
margin-left:auto;
margin-right: auto;
padding:2px;
border: none;
font-size: 0.9em;
}
#selected {
background: #00715f;
padding:0 1em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 70%;
padding-top: 1%;
border-radius: 10px;
font-size: 0.9em;
}
article a {
color: #004040
}
article h1 {
padding: 7px 7px 7px 30px;
width:auto;
margin-left: -30px;
margin-right: 30%;
text-align: left;
}
article h2 {
margin-left: -30px;
margin-right: 60%;
}
.articleText {
width:70%;
margin:auto;
}
#linkmap {
display: none;
}
iframe {
display: block;
border: none;
}
footer {
width:70%;
margin: auto;
border-radius: 10px;
font-size: 0.9em;
font-family: Times, serif;
}
mobilestyle
body {
}
header {
}
footer {
font-size: 0.7em;
}
#headerTitle h1{
display: none;
}
.icon {
margin-right:10px;
font-size:2em
}
.icon::after
{
content:'≡';
}
.icon-close::after
{
margin-right:10px;
font-size:2em;
content:'×';
font-weight: normal;
font-style: normal;
}
#headerTitle {
padding-top: 5px;
}
header img {
display:none
}
header h1 {
font-size: 1.4em;
letter-spacing: -0.04em;
}
header h2 {
font-size: 1.1em;
}
#menu {
border-bottom: 1em solid #00715f;
}
#menu ul li {
display: block;
height:2em;
width:100%;
margin-left:-3.5%;
font-size:1.2em
}
.menu_button {
display: block;
text-decoration: none;
text-align: right;
box-shadow:0 1px 1px rgba(0,0,0,0.15);
background: #00715f;
color: #ececec;
}
#selected {
background: #00715f;
padding:0 5em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 100%;
font-size: 0.8em;
}
article h1 {
width:100%;
margin-right: 20%;
padding:7px 0 7px 0;
text-align: center;
}
article h2 {
margin-right: 10%;
}
.articleText {
width:90%;
margin:auto
}
#linkmap{
display: block;
border: none;
}
iframe {
display: none;
}
style:
body {
background:#004040;
color: #005b4d;
text-align: center;
font-family: "Georgia", "Times", serif;
}
a {
color: #00715f;
}
a:hover {
font-style: italic;
}
header {
background: white;
width: 100%;
height:auto
}
header h1,h2 {
display: block;
font-weight: normal;
}
footer {
background-color: #ffffff;
width: 100%;
padding: 2% 0;
}
#menu ul li {
list-style: none;
text-align: center;
}
#menu ul li a {
text-decoration: none;
color: #005b4d;
}
article {
background: white;
text-align: justify !important;
padding-bottom: 1%;
margin: 5% auto;
}
article h1 {
background: #00715f;
color: #fff;
width:100%;
margin-right: 20%;
text-shadow: 0 1px 0 #403232;
font-weight: normal;
text-align: center;
}
article h2 {
background: #00715f;
color:#fff;
padding: 7px 7px 7px 30px;
font-weight: normal;
font-size: 1.2em;
}
This the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media= "(min-width: 240px) and (max-width:1023px)" type="text/css"
href="css/mobilestyle.css">
<link rel="stylesheet" media="(min-width:1024px)" type="text/css" href="css/desktopstyle.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="favicon.ico">
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="script.js"></script>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>ArteLab Responsive</title>
</head>
<body>
<header>
<img style="float:left" src="logos/artelab.png" alt="logo_artelab">
<img style="float: right" src="logos/insubria.png" alt="logo_insubria">
<div id="headerTitle">
<h1>Applied Recognition Technology Laboratory</h1>
<h2>Department of Theoretical and Applied Science</h2>
</div>
<a class="menu_button" href="#"><span class="icon">≡</span> </a>
<div id='menu'>
<nav>
<ul>
<li>LINK1</li>
<li>lINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li><a id="selected" href="link">LINK6</a></li>
</ul>
</nav>
</div>
</header>
and this is the script I use to open the menu in the responsive version
jQuery(document).ready(function() {
$('.menu_button').click(function() {
$("#menu").slideToggle();
$(this).find('span').toggleClass('icon icon-close');
});
});
You can try this:
In your desktop styles just do :
#menu {
display: block!important;
}
Your slideToggle() to the menu is causing it to have display:none in the style attribute. So we just overwrite that in desktop.