- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试了很多次,但还是不行。向下滚动时,#custom-nav
背景变为黑色,不透明度降低。我不知道我错过了什么,或者有什么问题,有人可以帮助我吗?
样式.CSS
/*
--------------
--------NAVBAR
--------------
*/
#custom-nav {
background-color:transparent;
border: 0;
box-shadow: none;
z-index: 9999999;
width:100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background .5s ease-in-out, opacity .5s ease;
-moz-transition: background .5s ease-in-out, opacity .5s ease;
transition: background .5s ease-in-out, opacity .5s ease;
}
.bchange {
background-color:black;
opacity:0.9;
}
#custom-nav h1 {
float:left;
margin-top:-1%;
margin-left:2%;
}
#custom-nav h1 a {
color: #fff;
font-size: 0.2em;
text-decoration: none;
transition: all 0.2s linear;
font-family: 'Lato';
font-style: ultra-bold;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 7px;
}
#custom-nav h1 a:hover{
text-decoration: none;
color:#FFF;
}
#custom-nav ul {
margin:0;
margin-top:1.5%;
margin-left:50%;
}
#custom-nav li {
padding: 0 0 0 0px;
list-style: none;
display: inline;
background: transparent;
text-align: center;
float:left;
position:relative;
}
#custom-nav li:after {
content: "";
}
#custom-nav li a {
float: left;
font-size: 0.9em;
font-weight: 100;
font-style: normal;
line-height: 26px;
font-family: Oswald;
text-transform:uppercase;
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 {
list-style-type: circle;
}
#custom-nav li ul li a
{ background: transparent;
font-size: 0.8em;
font-weight: 100;
font-style: normal;
line-height: 26px;
font-family: Oswald;
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>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) { ?>
<?php if(of_get_option('favicon') != ''){ ?>
<link rel="icon" href="<?php echo of_get_option('favicon', "" ); ?>" type="image/x-icon" />
<?php } } ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'atom_url' ); ?>" />
<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript'>
(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
if(
of_get_option('custom_font_family_name') &&
of_get_option('custom_font_woff') &&
of_get_option('custom_font_ttf') &&
of_get_option('custom_font_svg') &&
of_get_option('custom_font_eot')
):
?>
<style type="text/css">
@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;
}
</style>
<?php endif; ?>
<?php
wp_head();
?>
<!--[if IE 8 ]>
<link rel="stylesheet" id="stylesheet-ie8" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/ie8.css" />
<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">
<h1><a href="<?php echo get_settings('home'); ?>">Independent Genteleman</a></h1>
<?php wp_nav_menu(array('theme_location' => 'footer',)); ?>
</div>
</header>
最佳答案
<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>
您的这部分代码会导致您的导航栏在滚动时改变颜色,如果您不希望这种效果只删除此代码。
它的作用是:检查当前滚动位置并为您的菜单添加一个类 .bchange #custom-nav
关于jquery - 滚动时 WordPress 导航栏背景更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36680970/
我正在尝试将我所有的东西从 videomarathon.com/dk 导入到 videomarathon.com/se(帖子等) 我正在使用 wordpress 导入器。 上传导出的文件时,它向我显示
Azure WordPress 和 Azure 可扩展 WordPress 之间有什么区别?除了可扩展的 WordPress 允许您选择 azure 存储之外,我看不出有什么区别 最佳答案 基本区别:
我目前正在一个与体育相关的 wordpress 网站上工作。我所有的帖子都在同一个地方,分为足球、网球等。我想改变我博客的结构,比如足球,应该是domain.com/football对于网球,应该是
Wordpress 3 有一个漂亮的 TinyMCE 实现,我相信它比它所基于的原始 TinyMCE 运行得流畅得多。 很棒的事情:- HTML/源代码 View 作为选项卡而不是弹出窗口- 有吸引力
我在 codex.wordpress.org 和developer.wordpress.org 上看到了 WordPress 开发人员文档。他们都有关于插件和主题的文档。由于我不了解 wordpres
我有自定义帖子循环,我想在底部添加“查看全部”链接,该链接应指向包含该类型所有帖子的页面。 我能想到的唯一解决方案是为帖子类型创建一个模板页面并硬编码指向它的链接,但我希望有一个更优雅和动态的解决方案
我正在尝试使用类在 WordPress 中创建自定义 REST API 端点。我也用传统方法做了同样的事情——效果很好。但是,使用类时出现错误 The handler for the route is
我是 WordPress 的新手,正在尝试在主页的一部分中使用一些自定义代码,该部分旨在显示三个类别(白皮书、文章和帖子)中每个类别的 #1 趋势帖子.代码只是显示(据我所知)最近的 3 个帖子,无论
我正在尝试在 wordpress 中设置搜索页面的样式。在 search.php 中,我可以设置大部分页面的样式,但随后的以下语句(我从未经编辑的原始页面中获得)生成了内容。
我希望得到一些帮助来解决一些让我发疯的编码问题。我更喜欢在我的 wordpress 帖子标题中写“&”而不是“and”。但是写出&符号会破坏我们的 twitter、facebook 和 google-
是否可以只重写一个类别? 我有一个类别“ 照片”,并且只针对这个类别。 我只想从/category/photos重写它至 /photos 最佳答案 您可以使用 WP Rewrite API 来实现。
我有一个托管在 www.example.com 上的网站,它是一个 Bitnami 应用程序。 我想在 www.example.com/blog 上可以访问的同一台服务器上安装另一个 bitnami
我一直在做一些测试。注意:这仅在Safari浏览器中发生。 我关闭了所有插件并激活了主题二十(而不是我的Catch Box子主题)。在此配置下,除了顶部菜单中的“主页”选项卡(在Safari中显示如下
我是一名 php 开发人员,目前正在开发一个 CMS/博客系统。我想添加一个永久链接系统,比如 WordPress。我很好奇 WordPress 如何解析永久链接。例如,如何获取 id 这样的数据和
有谁知道Wordpress有多安全? 我不知道如何定义“有多安全”。但与其他CMS系统相比,它的安全性如何? 更新: 详细说明我的项目。 我会有很多用户注册。登录后,他们将可以访问我正在开发的插件。大
是否可以授予编辑者管理主题小部件的功能?默认情况下,只有管理员可以这样做。 谢谢, 乔恩 最佳答案 恐怕您将需要使用插件来实现此目的,因为更改窗口小部件是switch_themes capabilit
我有一个在服务器上运行的多站点 wordpress,我想将我的站点转移到另一台服务器上。我通过 filezilla ftp 下载了完整的文件备份还导出了完整的数据库。 现在我将此备份导入到新服务器 (
我使用通用 HTML 标签在 WordPress 插件中创建了一个表单。我刚刚用 echo 测试了文本框提交的值,它工作正常。提交表单后,我需要在同一页面中重定向或显示成功/失败消息。表单提交后如何显
我想启用 wordpress 站点的调试日志,在 wp-config.php 中添加以下设置 /* WordPress debug mode for developers. */ define('WP
是否可以仅在前端(无需编辑 .mo/.po 文件)更改我的 wordpress 安装(WP 3.0 Multisite)的语言? 在此处更改此选项: 也会在后端更改我的语言。 有任何想法吗? 感谢您的
我是一名优秀的程序员,十分优秀!