0
Я пробовал много раз, но что-то не сработало. При прокрутке вниз фон #custom-nav меняется на черный с более низкой непрозрачностью. Я не знаю, чего мне не хватает, или в чем проблема, может ли кто-нибудь мне помочь?WordPress navbar изменение фона при прокрутке
style.css
/*
--------------
--------NAVBAR
--------------
*/
#custom-nav {
\t background-color:transparent;
\t border: 0;
\t box-shadow: none;
\t z-index: 9999999;
\t width:100%;
\t -webkit-font-smoothing: antialiased;
\t -moz-osx-font-smoothing: grayscale;
\t -webkit-transition: background .5s ease-in-out, opacity .5s ease;
\t -moz-transition: background .5s ease-in-out, opacity .5s ease;
\t transition: background .5s ease-in-out, opacity .5s ease;
}
.bchange {
\t background-color:black;
\t opacity:0.9;
}
#custom-nav h1 {
\t float:left;
\t margin-top:-1%;
\t margin-left:2%;
}
#custom-nav h1 a {
\t color: #fff;
\t font-size: 0.2em;
\t text-decoration: none;
\t transition: all 0.2s linear;
\t font-family: 'Lato';
\t font-style: ultra-bold;
\t font-weight: 700;
\t text-transform: uppercase;
\t letter-spacing: 7px;
\t
}
#custom-nav h1 a:hover{
\t text-decoration: none; \t
\t color:#FFF;
}
#custom-nav ul {
\t margin:0;
\t margin-top:1.5%;
\t margin-left:50%;
}
#custom-nav li {
\t padding: 0 0 0 0px;
\t list-style: none;
\t display: inline;
\t background: transparent;
\t text-align: center;
\t float:left;
\t position:relative;
}
#custom-nav li:after {
\t content: "";
}
#custom-nav li a {
\t float: left;
\t font-size: 0.9em;
\t font-weight: 100;
\t font-style: normal;
\t line-height: 26px;
\t font-family: Oswald;
\t text-transform:uppercase;
\t letter-spacing:2px;
padding: 6px 20px 0 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;
}
#custom-nav li ul {
\t list-style-type: circle;
}
#custom-nav li ul li a
{ background: transparent;
font-size: 0.8em;
\t font-weight: 100;
\t font-style: normal;
\t line-height: 26px;
\t font-family: Oswald;
\t text-transform:uppercase; }
#custom-nav >li:hover > a
{ color: #1D1D1D;
background: #FFF;
background: -moz-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
text-shadow: none;
left: 0;}
#custom-nav li ul li
{ background: transparent;
width: 100%;}
#custom-nav li:hover ul
{ display: block;
overflow: hidden;
}
#custom-nav li ul
{ position: absolute;
z-index: 1;
top:100%;
left: 0;
height: auto;
width: 250px;
padding-bottom: 15px;
display:none;
margin:0px;
}<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes();?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes();?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes();?>> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" <?php language_attributes();?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes();?>> <!--<![endif]-->
<head>
\t <meta charset="<?php bloginfo('charset'); ?>" />
\t <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
\t <link rel="profile" href="http://gmpg.org/xfn/11" />
\t <?php if (! function_exists('has_site_icon') || ! has_site_icon()) { ?>
\t <?php if(of_get_option('favicon') != ''){ ?>
\t <link rel="icon" href="<?php echo of_get_option('favicon', ""); ?>" type="image/x-icon" />
\t <?php } } ?>
\t <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
\t <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />
\t <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>" href="<?php bloginfo('atom_url'); ?>" />
\t <!-- Javascript -->
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
\t <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
\t <script type='text/javascript'>
\t (function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
navbar = $('#custom-nav');
if (scrollPos > 20) {
navbar.addClass('bchange');
} else {
navbar.removeClass('bchange');
}
});
});
</script>
<?php
\t if(
\t \t of_get_option('custom_font_family_name') &&
\t \t of_get_option('custom_font_woff') &&
\t \t of_get_option('custom_font_ttf') &&
\t \t of_get_option('custom_font_svg') &&
\t \t of_get_option('custom_font_eot')
\t):
\t ?>
\t \t <style type="text/css">
\t
\t @font-face {
font-family: '<?php echo of_get_option("custom_font_family_name");?>';
src: url('<?php echo of_get_option("custom_font_eot");?>');
src: url('<?php echo of_get_option("custom_font_eot");?>?#iefix') format('embedded-opentype'),
url('<?php echo of_get_option("custom_font_woff");?>') format('woff'),
url('<?php echo of_get_option("custom_font_ttf");?>') format('truetype'),
url('<?php echo of_get_option("custom_font_svg");?>#<?php echo of_get_option("custom_font_family_name");?>') format('svg');
font-weight: normal;
font-style: normal;
}
\t </style>
\t <?php endif; ?>
<?php \t \t
wp_head();
?> \t
<!--[if IE 8 ]>
<link rel="stylesheet" id="stylesheet-ie8" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/ie8.css" />
\t <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/respond.js"></script>
<![endif]-->
</head>
<body <?php body_class(); ?>>
<div id="custom-nav" class="navbar navbar-default navbar-fixed-top">
\t <h1><a href="<?php echo get_settings('home'); ?>">Independent Genteleman</a></h1>
\t <?php wp_nav_menu(array('theme_location' => 'footer',)); ?>
</div>
</header>
[MCVE] (http://stackoverflow.com/help/mcve). – Green
Отсканированный фрагмент кода не работает из каталога – Fabricio