CSS:
body {
background-image: url("../images/ITWorld.jpg");
background-repeat: no-repeat;
background-size: 150%;
font-family: sans-serif;
}
p {
font-size: 22px;
}
#navbar {
display: inline;
text-align: center;
font-size: 25px;
}
a {
text-decoration: none;
font-family: sans-serif;
color: black;
}
.listitem {
padding: 7px;
display: inline;
border: 3px solid black;
}
a:hover {
color: white;
}
.reference {
font-size: 22px;
padding-top: 50px;
padding-bottom: 50px;
}
#overviewpara {
width: 800px;
}
.referenceli {
padding: 5px;
}
HTML:
<ul>
<li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>
<li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li>
</ul>
My problem is that when i hover over my hyperlinks on my references page they do not react in the correct areas. For example I'll be link 5px above the link and it will not higligh or i will be right over the link, but it will not work. Sorry for messy html.
You should make the padding on your a tag 5px, and not your list item.
.referenceli {
padding: 5px;
}
should be
.reference {
padding: 5px;
text-decoration: none;
font-family: sans-serif;
color: black;
}
Also remove the 50px padding from the a tags: You will be better of applying that size(50px) to the margin of the list items:
.reference {
font-size: 22px;
padding-top: 50px;
padding-bottom: 50px;
}
should be
.reference {
font-size: 22px;
padding: 5px; /*So you will have a hover effect 5px below and above the link*/
}
.referenceli {
margin: 50px 0px;
}
Changed paddings top and bottom to 5px:
.reference {
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
Fiddle:
http://jsfiddle.net/uNpbk/
Changed paddings top and bottom to 5px:
.reference
{
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
Give this a try. I think that you need to style div and not the li tags. I added some borders to the reference and referenceli. Add the borders to your code to see your styling impact.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<style>
body {
background-image: url("../images/ITWorld.jpg");
background-repeat: no-repeat;
background-size: 150%;
font-family: sans-serif;
}
p {
font-size: 22px;
}
#navbar {
display: inline;
text-align: center;
font-size: 25px;
}
a {
text-decoration: none;
font-family: sans-serif;
color: black;
}
.listitem {
padding: 7px;
display: inline;
border: 3px solid black;
}
a:hover {
color: red;
font-weight:bold;
}
.reference {
font-size: 22px;
padding:10px 0 10px 0;
border:green solid 1px;
}
#overviewpara {
width: 800px;
}
div.referenceli{
padding:20px 0 0 0;
border:red 1px solid;
}
</style>
<ul>
<div class="referenceli"><!--USE DIV TO FOCUS CSS -->
<li><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm
</a></li><!-- END LI -->
</div><!-- END REFERENCELI -->
<div class="referenceli">
<li><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011
</a></li><!-- END LI -->
</div><!-- END REFERENCELI -->
</body>
</html>
Related
I am banging my head against a wall trying to add a dropdown menu to an existing menu bar and can't seem to get it to line up right without screwing up the existing menu, can anyone please just add a single dropdown to my menu so I can see what I have been missing? I believe I am not getting the position: absolute/relative correct or maybe it is the paddings?
This is my code:
html {
display: table;
margin: auto;
text-align: center;
}
body {
display: table-cell;
vertical-align: middle;
max-width: max-content;
margin: auto;
}
td {
background-color: #FFF;
border:1px solid black;
padding: 5px;
}
table {
background-color: #FFF;
width: 100%;
border-collapse: collapse;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
hr {
border: none;
border-top: 1px solid #CCCCCC;
height: 1px;
margin-bottom: 25px;
}
#styletwo {
position: relative;
display: block;
height: 24px;
font-size: 11px;
font-weight: bold;
background: transparent url(bgOFF.gif) repeat-x top left;
font-family: Arial,Verdana,Helvitica,sans-serif;
width: 715px;
}
#styletwo ul {
position: absolute;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 715px;
}
#styletwo ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
#styletwo ul li a {
display: block;
float: left;
color: #000;
text-decoration: none;
padding: 6px 20px 0 20px;
height: 24px;
}
#styletwo ul li a:hover, #styletwo ul li a.current {
color: #fff;
background: transparent url(bgON.gif) repeat-x top left;
}
.center {
margin: auto;
width: 60%;
padding: 10px;
}
input[type=text] {
width: 100%;
# padding: 12px 20px;
# margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title </title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<body align = "center">
<a href='index.php'> <img src='images/simplesmdrlogo.jpg'> </a>
<div id="menucase" align="center">
<div id="styletwo">
<ul>
<li><a href='results.php'>Search All</a></li>
<li><a href='user.php'>Extensions</a></li>
<li><a href='accountcodelist.php'>Account Codes</a></li>
<li><a href='trunk.php'>Trunks</a></li>
<li><a href='pbx.php'>PBX Configuration</a></li>
<li><a href='#'>Help </a>
</ul>
</div>
</div>
Figured it out, was not placing the new dropdown class I had created in the correct entry.
I'm new to HTML and CSSand I have been trying to figure out what I've been doing wrong all night.
I would like to set the background color of div with id="transparentBox" to be a different color (eventually a and off-white box with some currently unknown opacity setting) However, it seems as thought the styling I'm applying via CSS isn't doing the trick. Any advice here would be greatly appreciated.
I've set a background on my HTML, now how do I set the background of one id to be a different color?
html
{
text-align: center;
background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed;
}
body
{
text-align: center;
}
p
{
text-align: left;
}
.off
{
color: #F0FFFF;
}
#header
{
height:100px;
width:960px;
}
#header h1
{
position: relative;
text-align: left;
color: #000000;
font-size: 45px;
left: 5px;
top: 20px;
}
body
{
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navigationBar
{
height: 40px;
background-color: #F0FFFF;
border-color: #000000;
}
ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li
{
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover
{
background-color: #111;
}
.active
{
background-color: #4CAF50;
}
#navigationMenu
{
margin-top: 0px;
height: auto;
background-color: #F0FFFF;
border-color: #000000;
border-radius: 25px;
}
#transparentBox
{
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: 500px;
height: 400px;
background-color: #FFFFFF;
border-color: #000000;
border-radius: 10px;
}
<!DOCTYPE html>
<html xmlns="http://www.calebwolff.us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="30" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Caleb Wolff's Personal Website</title>
</head>
<body>
<div id="header">
<h1>Caleb<span class="off">Wolff</span></h1>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>Facebook</li>
</ul>
</div>
<div id="transparnetBox">
<h1>HELLLOOO</h1>
</div>
</body>
</html>
To change the background there are two methods
Change color normally without shades as
html
{
text-align: center;
background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed;
}
Change color with gradient shades
you should change the colors in html style with color codes of 6 digits
html
{
text-align: center;
background: linear-gradient(to top right, #33ccff 70%, #0066ff 100%) fixed;
}
There are list of color codes available and opacity of those colors are set in percentage.You can try either of these two methods.
The id name in css and html are different(typo), in css its '#transparentBox' and in html it is 'transparnetBox'.
Please make sure the id name every where you use are the same. You can always use browser developer tools to check and inspect styling on DOM elements
<!DOCTYPE html>
<html xmlns="http://www.calebwolff.us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<meta http-equiv="refresh" content="30"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Caleb Wolff's Personal Website</title>
<style>
html {
text-align: center;
background: linear-gradient(to top right, #33ccff 0%, #0066ff 100%) fixed;
}
body {
text-align: center;
}
p {
text-align: left;
}
.off {
color: #F0FFFF;
}
#header {
height: 100px;
width: 960px;
}
#header h1 {
position: relative;
text-align: left;
color: #000000;
font-size: 45px;
left: 5px;
top: 20px;
}
body {
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navigationBar {
height: 40px;
background-color: #F0FFFF;
border-color: #000000;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#navigationMenu {
margin-top: 0px;
height: auto;
background-color: #F0FFFF;
border-color: #000000;
border-radius: 25px;
}
#transparnetBox {
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: 500px;
height: 400px;
background-color: #FFFFFF;
border-color: #000000;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Caleb<span class="off">Wolff</span></h1>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>Facebook</li>
</ul>
</div>
<div id="transparnetBox">
<h1>HELLLOOO</h1>
</div>
</body>
</html>
Adding color styling to the <html> tag rather than the <body> tag is a bit unusual. Why not change that to the <body> tag?
On another note, try this:
#transparentBox
{
position: relative;
display: block;
margin: 10px;
padding: 10px;
width: 500px;
height: 400px;
background-color: #FFFFFF !important;
border-color: #000000;
border-radius: 10px;
}
Check the typo between <div id="transparnetBox"> and # transparentBox.
You had to check your block in the browser and see that you do not have any styles for this component, and not just "background colors."
It is hard to learn "float" "overflow" "clear" and some other properties so please help me find good online websites to learn these properties ..
I opened some websites to make designs like them I found http://wix.com I admired its nav bar so i tried to make like it but i had a problem when mouse is over the il it is pushed down to show the top border how can I fix that
thanks and I am sorry for my weak English
body {
background-color: lightblue;
}
ul {
position: fixed;
list-style-type: none;
overflow: hidden;
top: 0px;
right: 0px;
width: 100%;
margin: 0px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
display: block;
background-color: #666666;
transition:background-color, 1s;
}
ul:hover {
background-color: #333;
}
il {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
}
il:hover {
border-top:5px solid lightblue;
}
#navl {
font-family: Trebuchet MS’, Helvetica, sans-serif;
letter-spacing: 3px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
pre{
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
letter-spacing: 2px;
font-size: 30px;
text-align: center;
color: white;
margin-top: 150px;
}
#plans:link, #plans:visited {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: block;
border: 1px solid white;
border-radius: 30px;
margin: auto;
width: 110px;
padding-top: 20px;
padding-bottom: 20px;
font-size:20px;
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<il><a id="navl" href="index.html">Home</a></il>
<il><a id="navl" href="Plans.html">Plans</a></il>
<il><a id="navl" href="About.html">About</a></il>
<il><a id="navl" href="Contact.html">Contact Us</a></il>
</ul>
<pre>test</pre>
<a id="plans" href="plans.html">Plans</a>
</body>
</html>
The reason this happens is because the border adds height to the element. To correct it, you can either remove height from the main element or shift it up:
li:hover {
margin-top: -5px; //shifts the element up 5px
}
or you can have an invisible border as Teuta mentions that gets "covered up" by the new border.
At first, replace those il with li, and add this style to your li:
li {
border-top: 5px solid transparent;
}
And in ul, instead of padding-top:8px add padding-top:3px.
Here is the link with a little work around I did. I removed the padding top in ul. Changed the il to li. Because actually it is 'li' not 'il'. And I added a border top in li.
Here is the css code I changed.
ul:hover {
background-color: #666666;
}
li {
transition:border-top,1s;
float: left;
padding-right: 10px;
border-right: 1px solid white;
border-top:5px solid #666666;
}
li:hover {
border-top:5px solid lightblue;
}
https://jsfiddle.net/7x7dy3jt/
I would like to add a line above and below my nav-bar that would fade out at the ends of it, like shown in the image below:
this is my HTML so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Portfolio - Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>About Me</li>
<img class="circle" title="circle" alt="circle" src="images/circle.png" />
<li>Contact</li>
</ul>
</div>
<div id="content">
<div id="webInfo">
<p>Hi, my name is Alex Trotter and this is my portfolio website</p>
<p>below you will find some of work that I have created.</p>
<p>Above you can navigate to different pages to learn more about me.</p>
</div>
<div id="exampleWork1"></div>
<div id="exampleWork2"></div>
<div id="exampleWork3"></div>
</div>
</body>
And this is my CSS:
body {
display: block;
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
width: 1920px;
height: 200px;
display: inline-block;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
width: 100%;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
.circle {
padding-top: 25px;
}
Whenever I try to add a border to the nav-bar it goes across the entire screen, but if I make it so that the nav-bar border is only as big as it needs to be, the nav bar isn't in the center of the screen. What is the best way to solve this problem?
A couple of positioned pseudo-elements with a linear gradient background would be probably the simplest method.
Note: Your menu HTML is invalid, ul can only have li as direct children..not images, you can search SO for other options for menu dividers.
body {
margin: 0;
padding: 0px;
}
#header {
background-color: #b9fee2;
height: 200px;
text-align: center;
}
h1 {
font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
font-size: 75px;
font-weight: 500;
text-align: center;
margin: 0px;
color: #000000;
text-decoration: none;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
color: #000000;
text-decoration: none;
}
#nav {
display: inline-block;
-webkit-padding-start: 0px;
text-align: center;
margin: auto;
position: relative;
}
#nav::before,
#nav:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75) 50%, rgba(0, 0, 0, 0) 100%);
}
#nav::before {
top: 0;
}
#nav:after {
bottom: 0;
}
#nav li {
display: inline-block;
vertical-align: top;
}
#nav a {
-webkit-transition: background-color 0.2s linear;
}
#nav a:link {
display: block;
text-align: center;
color: #000000;
text-decoration: none;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
}
#nav a:visited {
color: #000000;
}
#nav a:hover {
display: block;
text-align: center;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
font-size: 30px;
}
<div id="header">
<h1>Alex Trotter</h1>
<ul id="nav">
<li>Home
</li>
<li>About Me
</li>
<li>Contact
</li>
</ul>
</div>
in the CSS, add a hover:
#nav {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#nav.noHighlight {
background:transparent;
border-color:transparent;
}
then add a jQuery script, and put
setTimeout(function(){
$('#abc').fadeIn();
$('#abc').addClass('noHighlight');
},1000);
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.