ok, diciamo che sono sempre stata abituata ad editare il custom.css che nei vari template sta nella directory css del template, posso aggiungere il codice html, chiaramente solo quello relativo alle funzioni css
mi spiego meglio, questo č il codice:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>How to create a resizing menu bar | Webdesigner Depot</title>
<meta name="author" content="Antonio Pratas">
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
header, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
/* Basic layout */
body{
background-color: #ebebeb;
}
ul{
list-style-type: none;
float: right;
}
li{
display: inline;
float: left;
}
img.logo{
float: left;
}
nav{
width: 960px;
margin: 0 auto;
}
section.stretch{
float: left;
height: 1500px;
width: 100%;
}
section.stretch p{
font-family: 'Amaranth', sans-serif;
font-size: 30px;
color: #969696;
text-align: center;
position: relative;
margin-top: 250px;
}
section.stretch p.bottom{
top: 100%;
}
header{
background: #C7C7C7;
border-bottom: 1px solid #aaaaaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
header a{
color: #969696;
text-decoration: none;
font-family: 'Amaranth', sans-serif;
text-transform: uppercase;
}
header a.active, header a:hover{
color: #3d3d3d;
}
header li{
margin-right: 30px;
}
/* Sizes for the bigger menu */
header.large{
height: 120px;
}
header.large img{
width: 489px;
height: 113px;
}
header.large li{
margin-top: 45px;
}
/* Sizes for the smaller menu */
header.small{
height: 50px;
}
header.small img{
width: 287px;
height: 69px;
margin-top: -10px;
}
header.small li{
margin-top: 17px;
}
</style>
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("header").removeClass("large").addClass("small");
}
else{
$("header").removeClass("small").addClass("large");
}
});
</script>
</head>
<body>
<header class="large">
<nav>
<img class="logo" src="wdd.png"/>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Posts</a></li>
<li><a href="#">Awesome Freebies</a></li>
</ul>
</nav>
</header>
<section class="stretch">
<p>Let's get that menu small!</p>
<p class="bottom">End of the line.</p>
</section>
</body>
</html>
