我试图通过修改Bootstrap CSS文件来修复导航栏。如果我向下滚动，导航栏的颜色应该会改变并固定在顶部。 因此，我通过引用this article添加了以下JS代码，但它不起作用。 let MQL = 992;
if ($(window).width() > MQL) {
let headerHeight = $("#mainNav").height();
$(window).scroll(function () {
if ($(document).scrollTop() > headerHeight) {
$("#m
浏览 23提问于2019-03-16得票数 0
4回答
你好，我在我的网页上添加了HTML和CSS代码的底部导航栏，但我想有任何帮助和解决方案的网站底部的中心是非常感谢我附上了HTML，CSS代码和网页截图，在那里我有我的导航栏目前在左侧非常感谢提前。
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding
浏览 67提问于2018-02-01得票数 0
2回答
根据本地存储中的值更改类属性
、、、、
我的头文件中有js，它检查本地存储并相应地设置样式表。我使用的是Bootstrap导航栏，我想让导航栏根据本地存储来改变颜色反转，但是我不能让它工作。我想是因为导航条码在身体里。
以下head部分中的代码：
<script>
if (localStorage.getItem("theme") == "light") {
document.getElementById("maincss").href = "./css/main.css";
} else if (localStorage.g
浏览 28提问于2017-01-21得票数 0
回答已采纳
我有一个简单的网页，在其中我有一个导航栏内的导航标签。当视口小于700 to宽时，我使用媒体查询来隐藏此导航栏(通过在CSS中为nav标记设置display: none )，并在viewport为700 to宽或更宽时(通过在CSS中为nav标记设置display: block )来显示此导航栏。这正是我最初加载页面时想要的工作方式。我可以根据需要调整视口的大小，每次都能看到我想要的效果(导航栏的消失和重新出现)。
我在这个页面上也有一些javascript。首先，我得到了对nav元素的引用如下：
const mynav = document.querySelector('nav
浏览 10提问于2022-03-16得票数 2
回答已采纳
我在同一页面上添加了两个bootstrap内部导航栏。我已经创建了针对我的栏的自定义css。我可以更改页眉导航栏的水平填充，但当我尝试对页脚导航栏执行同样的操作时，我无法更改它。如何更改同一页上两个导航栏的水平间距。
下面是我的代码：
标题导航栏
浏览 0提问于2013-07-19得票数 0
回答已采纳
我有两个带有fixed-top类的导航栏，一个显示在另一个的下方-第二个添加了top: *height of first navbar* css。
每当用户向下滚动时，第一个导航栏的高度都会缩小，方法是使用问题的答案中修改的代码删除额外的pt pb引导填充类。
由于两个导航栏都是固定的，因此当第一个导航栏发生收缩时，两个导航栏之间会产生一个间隙。
我对此的解决方案非常激进--我使用库检测第一个导航栏的大小调整，并根据第一个导航栏的高度更改第二个导航栏的top css属性。
考虑到这是相当消耗CPU的任务，因为我已经为第一个导航栏填充属性transition:padding 0.2s ease;
浏览 14提问于2018-02-14得票数 4
回答已采纳
1回答
我正在创建一个网站，我想在CSS中创建一个导航栏。但是，导航栏不可单击。这是用HTML和CSS制作的。
包含导航栏的HTML代码：
<link rel="stylesheet" type="text/css" href="style.css">
<ul id=navlist><li class=active> Home </li>
<li> <a title="LINK: My Youtube videos” href="youtubevideosch9chang
浏览 1提问于2016-12-13得票数 0
嗨，我有一个导航栏，当页面向下滚动时，它会缩小，当它在顶部时，它将处于正常状态。我尝试使用下面的jquery代码来缩小导航栏和图像
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('a.navbar-brand img').css({
'height': '30'
});
} else {
$('a.navbar-brand img').css({
浏览 15提问于2020-03-13得票数 0
我需要添加一个Facebook按钮，以便与导航栏的其余部分内联，但我希望它不采取相同的CSS样式属性作为导航栏(即: CSS属性属于该特定列表)。有没有办法编写代码，让Facebook按钮与导航栏内联，但应用不同的样式？
谢谢!
浏览 2提问于2013-02-04得票数 0
我想要将一个元素附加到导航栏的底部导航栏是固定的，所以当我滚动时，它将位于顶部。问题是如何更改该元素的页边距顶部，使其顶部成为导航栏的底部。它的底部是固定的..(如果我读得太多，它会被隐藏)，所以当我滚动时，这个元素的高度会变小。
下面是我所做的
$(document).on('scroll', function (e) {
$('.imagebleu').css('opacity', ($(document).scrollTop() / 500));
$('.imagebleu').css('margi
浏览 0提问于2015-07-02得票数 0
我有一个固定在一定高度的导航栏(通过克隆原始的导航栏容器并仅在滚动后显示克隆)。
在这个导航栏容器(一个广告)中有一个div，每当用户向下滚动时，我想隐藏它，而在向上滚动时，它会重新出现。然而，我并没有取得任何成功！
导航栏的基本HTML：
<div class="toolbar-container">
<div class="nav-ad"> ... </div>
<div class="toolbar"> link 1 • link 2 • link 3 ... </div>
浏览 3提问于2017-04-18得票数 2
我熟悉如何重写bootstrap css类，并且我已经成功地更改了固定导航栏的背景色。然而，我最近在我的项目中建立了bootstrap.css和bootstrap-responsive.css文件的maven依赖关系，从而从我的源代码中删除了这些文件。现在，导航栏内部的覆盖不存在，并且导航栏已恢复为默认颜色。有什么想法吗？
浏览 0提问于2012-10-02得票数 1
PHP代码会放大我的导航栏。
当我删除PHP部分时，我的网页导航栏变得正常(与我的其他网页的导航栏一样，没有任何PHP代码)。但是当PHP代码出现时，导航栏就会放大。
<?php
include "connection.php";
$roll_no=$_REQUEST["rollno"];
session_start();
$_SESSION['rollno'] = $roll_no;
$fetch=mysqli_query($connection,"select * from std_detail where std_rollno
浏览 52提问于2019-04-19得票数 -2
回答已采纳
1回答
如何在角度组件中定位Div
、、、、
我正在创建一个简单的Angular应用程序，其中我想将导航栏放在左侧。问题是我很容易得到导航栏，但是当我尝试处理内容(应该在导航栏旁边)时，它总是“在”我的导航栏下。我试图改变一些东西，但是组件之间的CSS对我来说并不是那么容易理解。 转到代码，我得到了:我的导航栏，它由以下1个CSS类描述： .navbar{
height: 100%;
position: fixed;
background-color: gray;
overflow: auto;
} 在app.component.html中，我将导航栏定义为第一个元素，然后是router-outlet，如下所示： <div>
浏览 17提问于2020-10-15得票数 1
下面是我的网站的导航栏：
只要活动菜单选项是Home、About或Contacts，当您在不同的选项之间进行选择时，导航栏就会完全对齐。
然而，当我在Members选项中时，导航栏稍微向左移动了一点。我想将它向右移动几个像素，这样它在导航时就可以完美地对齐。
我将CSS应用于以下块元素：
.navigation > li > a
{
some styling
}
这会影响导航期间导航栏的样式。
但是，当选择了Members时，如何将某些边距样式应用于nav栏？
我可以重命名类名，但这样我就需要重复编写代码来重新设置nav栏的样式，以及新添加的边距修正。
有没有办法
浏览 3提问于2014-07-16得票数 1
1回答
我正在制作一个网站，在导航栏中应该有另一个子导航栏。我认为CSS选择器中存在逻辑错误。
下面是我的CSS代码：
.trendinglist{
display: none;
}
.dealerlist ul li #trending:hover .trendinglist{
display: block;
color: black;
}
浏览 0提问于2020-07-22得票数 0
1回答
我正在编写简单的HTML和CSS & JS代码，
我试图创建一个响应性导航栏，我的标志作为主页的链接-然而，当导航条的高度是理想的(在2-3雷姆)的图像太小，
我试过调整填充和边距，但如果不扩大导航栏中剩余的资产，我就无法放大图像。
2 2rem导航条-带有小图像的HTML代码CSS代码图像在理想大小，链接和导航条太大
1： 2： 3： 4：
任何帮助都将非常感谢
浏览 2提问于2022-04-29得票数 0
4回答
我希望页面的内容始终显示在导航栏的下方，类似于此页面的工作方式：
您可以在内容中向上或向下滚动，但导航栏永远不会消失。
为此，我使用position:fixed将导航栏固定在页面顶部。这是有效的，但我仍然能够上下滚动内容，当我想要内容始终被推到导航栏下方时，它会“遍历”并越过导航栏。
你有什么建议吗？下面是包含导航的<ul id='navigation'>的css代码：
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
浏览 9提问于2013-01-19得票数 0
回答已采纳
2回答
我在一个网站上有一个导航栏，并在达到一定的高度(y轴)后。我想要操纵我的导航栏的css代码，例如背景颜色。
到目前为止，一切都很好，现在我用if语句检查高度，如果它克服了某个特定值，我操纵导航栏class....but的css，我如何才能确保它经常被检查，我已经使用了setInterval方法，但我不确定这是否是一个好的solution...anyone，谁能帮我？
提前感谢！
function update() {
if (currentHeight>600) {
$(".class").css({"background-color":
浏览 0提问于2016-06-20得票数 0
1回答
我正在尝试模仿在上看到的导航栏，但在使用JQuery时遇到了一些问题。我使用if语句进行滚动格式化，然后在if语句的底部包含一个hover方法。
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("nav").css("background-color","white");
$("nav").css("height","75px"
浏览 1提问于2017-09-02得票数 0
1回答
好的，我做了这个导航栏：
HTML：
CSS：
我想要“统一代码”在我的导航栏中间，但我试过了，但我似乎无法使它工作。
有什么帮助吗？
浏览 2提问于2015-06-14得票数 0
回答已采纳
我是CSS的新手，我正在创建一个欢迎页面，并在导航栏中有一个登录部分。我成功地创建了整个页面的div部分，但是我需要css编写导航条的帮助。
我现在拥有的CSS：
div.col-4
{
width:41%;
float:left;
background: #ffffff;
height: 100%;
}
div.col-6
{
width:58%;
float:right;
background: #ffffff;
height: 100%;
}
#topbar-hello{
position:fixed;
浏览 6提问于2016-03-24得票数 0
回答已采纳
让我们详细说明我的问题。我想我们有3个模板文件1.主机2.孩子(主页)3.导航栏布局(包含在主页中)
材料->主页->导航栏
我有2个外部css文件，其中有此css
p
{
color:red;
}
和
p
{
color:blue;
}
第一个css文件链接到master.blade.php中，第二个css文件链接到navbar.blade.php中
我希望导航栏的文本颜色为蓝色，主页(导航栏除外)的文本颜色为红色。
现在输出是蓝色的(覆盖了master中声明的css )。
我不想修改css (具体地说)，在早期有什么类似css的作用域吗？
浏览 0提问于2018-05-06得票数 1
2回答
嗨，我正在尝试实现这个导航栏效果：，这样当我向下滚动导航栏时，导航栏会跟随并动画到一个固定的位置。我已经开始在这里编写代码，但无法让动画工作：
我的Jquery目前看起来像这样：
$(function() {
var bar = $('#topbar');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
bar.stop().css({'position' : 'absolute
浏览 1提问于2013-03-11得票数 2
这就是我现在拥有的代码给我的。
我想要更改颜色：
我该如何更改它？
这就是我使用的导航元素。我不需要导航栏-暗，因为我已经有css，使导航栏自定义颜色，但我不知道如何改变3条的颜色。
浏览 0提问于2020-06-25得票数 0
我正在使用Bootstrap css的导航栏，它来了非常好。但是宽度看起来很大，我想要减小它(也要确保它在其他视口中也能得到同样的缩小/调整)，并减小导航栏下拉菜单下的选项面板/文本大小。
我使用了下面的css类
导航条导航条-默认导航条-固定-顶部导航条-反向
导航栏是黑色的(给人惊喜的效果)和一些需要的东西，但下拉菜单下的所有选项都是白色的。如何将这个白色背景变成黑色？有没有已经准备好的引导程序类？
如果navbar-inverse可以使顶部导航栏变为黑色，那么一定有一些类可以为相同导航栏下的下拉面板选项提供相同的效果
我希望在这一点上避免自定义css来实现这一点。
谢谢，法拉兹
浏览 2提问于2014-04-27得票数 0
2回答
CSS定位和重叠
、、、
我有一个HTML页面的CSS生成的部分。它当前位于页面的主内容区域中，该区域位于导航栏的右侧。我有一个图形，它需要居中到整个HTML页面，包括在导航栏下。
如何使用CSS定位来覆盖HTML代码块(它也有一些CSS )，使其在整个页面上居中。
我有一种预感:我想我需要重叠的CSS部分去导航栏下面。
.layout #mainContent h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}
要覆盖的超文本标记语言将位于h6之下。
HTML将按如下方式编写
<h6>
All the HTML code t
浏览 0提问于2011-10-28得票数 0
回答已采纳
1回答
所以我从Bootstrap网站上拿起了导航栏组件，最初我使用普通的CSS来添加必要的样式。现在，我正在从普通的CSS迁移，并利用TailwindCSS为导航栏组件添加必要的样式。在TailwindCSS的帮助下，我成功地为导航栏的大多数部分添加了样式，除了导航栏组件中的搜索栏。 目前，我正在使用纯CSS在导航栏组件中设置搜索栏的样式。 下面是HTML代码： <form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" id={
浏览 29提问于2021-04-26得票数 3
1回答
我正在开发一个使用Ruby on Rails的网站。现在，我已经在部分文件中添加了bootstrap导航栏，"_navheader.html.erb" in my layouts文件夹。我在application.html.erb中的body标记后面呈现了部分内容。问题是我在一个单独的css文件中有一些用于导航栏的CSS代码。如何将CSS文件navheader.css.scss链接到html文件_navheader.html.erb？
浏览 0提问于2015-11-24得票数 6
我创建了带有指向其他页面的超链接的导航栏
CSS代码：
a
{
display:block;
width:120px;
color:brown;
text-decoration:none;
text-align:center;
background-color:yellow;
padding:4px;
transition-property: background;
transition-duration: 1s;
}
但是，这现在会影响导航栏之外的其他链接。如何将导航栏中的链接与内容文本中的链接分开？
浏览 0提问于2013-02-19得票数 1
回答已采纳
2回答
我是第一次使用HTML，需要帮助将当前导航栏居中：
它的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>large background</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!div class=
浏览 2提问于2015-07-25得票数 1
1回答
我想在导航栏上面放一张图片，然后在导航栏后面放一张背景图片。
导航栏上方图片的当前html：
<div class="viewport-1"></div>
我当前用于导航栏上方图像的CSS：
.viewport-1
{
background-size: cover;
background-image: url('saultitle.png');
height: 100vh;
}
当我将鼠标悬停在括号中的链接上时，该图像就会显示在CSS工作表中，并且该图像在网页中应该显示的位置有一个间隙--但是它没有显示。
至于导航栏图像，没有间隙，因为它
浏览 12提问于2018-01-02得票数 0
回答已采纳
3回答
固定标题下的固定导航栏
、、、
我的站点由四个div组成；它们的顺序是：header、navbar、main和footer。
我希望页眉留在原地，导航栏在页眉的下面，但当页面滚动时，我只想让导航栏粘在顶部。
我现在使用的代码()是导航栏停留在顶部，但在标题的顶部。当我将顶部设置为页眉的高度(将导航栏放在页眉下方)并向下滚动时，会有一个与页眉一样宽的间隙，并且导航栏不会粘在顶部。
有没有办法在纯CSS中解决这个问题？我没有使用Bootsrap，虽然我使用JS或JQuery没有问题，但我没有任何使用经验。
浏览 2提问于2014-02-02得票数 1
1回答
我有两个移动导航栏的问题。当我点击第一个导航栏图标时，两个导航都出现了。我正在尝试CSS的可见性:点击图标时没有代码，但是我没有得到正确的结果。你能帮帮我吗？
我已经附上了下面的图片供您参考。
这是两个导航栏。一件是黑色的一件是白色的。
这就是我想要解决的问题。正如你所看到的，两个人都出来了。
这就是当我们点击导航栏2时发生的情况，这是正确的。
谢谢。
浏览 1提问于2017-10-30得票数 0
回答已采纳
我的导航栏的位置有一点小问题。我有我想要的导航栏(从顶部稍微分离，就像这个例子：)，但是我轮播中的图片在导航栏下面结束。
我想让我的旋转木马中的图片一直延伸到页面的顶部，并让导航栏重叠在旋转木马的上部(如上面的示例)。我已经尝试过填充，但我能得到的最高的转盘图像是导航栏的底部。我已经附加了下面的导航栏，carousel和carousel css的代码片段。如有任何帮助，将不胜感激，提前谢谢。
导航栏的代码：
<div class="container">
<div class="navbar navbar-inverse" role=
浏览 2提问于2014-01-17得票数 7
1回答
我已经尽了一切努力让我的导航栏和主页一起出现。
当我使用下面的代码，即使我确定我的css工作，我不能得到一个导航条出现。所有发生的事情是我的“关于”链接到极右，我的“家”在左边，但是没有导航栏可以看到。
有人知道为什么我的导航条css没有激活吗？即使所有其他的引导css都是有功能的？
<!DOCTYPE html>
<html>
<head>
<title>Attempting to get nav bar to work</title>
<meta charset="UTF-8">
浏览 4提问于2016-12-06得票数 1
回答已采纳
当我之前包含bootstrap.min.js时，我的引导转盘和导航栏中的下拉菜单似乎不起作用
以下是我的代码
<link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="bootstrap/dist/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/j
浏览 4提问于2017-07-14得票数 0
1回答
我正在使用mootools，并将基金会作为我的css“框架”。我正在使用的导航顶栏从基金会和它的伟大。然而响应式的设计被毁了。
由于我没有使用jquery ...
<--这是基础代码。 <-导航文档
我无法理解他们用来转换它的jquery脚本。有人知道mootools响应式导航栏吗？
浏览 2提问于2012-09-21得票数 0
回答已采纳
我希望复制类似于RStudio的SuperZip闪亮仪表板的布局，如下所示：
该应用程序的代码可在以下位置获得：
基于该代码，我想在导航栏的右侧添加一个图像(比如Rstudio徽标)，并在下面的图像中突出显示红色框。我想我需要添加一些HTML和CSS代码，但我不确定如何继续。
我的问题类似于这个问题：
但是，请注意，答案提供了将图像放置在导航栏左侧的指示。我想把它放在导航栏的右边。
浏览 3提问于2018-01-30得票数 2
回答已采纳
我正在尝试构建一个没有页面导航栏和页眉的页面，但我希望每隔一个页面都有导航栏和页眉--我该如何实现这一点？ 我已经将这段代码添加到页面的.css文件中，但它最终隐藏了每个页面的导航栏和页眉： .navbar-custom {
display: none;
visibility: hidden;
}
header{
display: none;
} 当前页面截图： ? 非常感谢你的帮助。
浏览 35提问于2021-04-08得票数 0
1回答
正在尝试使用CSS3创建垂直导航栏。类似于"Smokey Bones“网站使用的以下示例
但是，我不能使用Wordpress站点或插件。我需要用HTML5/CSS3来做这件事&我可以使用一些javascript。谁知道我在哪里可以找到可用的垂直导航栏？我需要CSS代码。
请注意，简单的垂直链接列表将不起作用。此外，它应该是响应性的。
浏览 21提问于2018-08-05得票数 0
3回答
所以我不知道怎么表达，但我会试一试。
在我的网站上，左边有一个导航栏。段落和链接元素在CSS中样式化。现在，我的导航栏中有一个链接，它有一个唯一的id，我不想从导航栏的CSS中继承它。
看起来是这样的：
<nav id="leftbar">
<a href="link" id="special" onclick="function()"></a>
<p>Navigation area 1</p>
<a href="index.html"
浏览 1提问于2019-01-02得票数 1
回答已采纳
我在我的网站上的一些页面上显示了一个通知栏。如果显示了导航栏，我想突出显示导航栏并将其向下移动。
栏的css是<div id="infobar_1_1" class="info_bar" style="background-image:... <div class="infobar_inner"><span id="infobar_txt" ....</div></div>。
我正在尝试使用jquery代码if ($('#infobar_1_1').hasC
浏览 1提问于2014-05-07得票数 0
我正在使用一个导航栏，它在向下滚动页面时隐藏，在Wordpress中向上滚动时显示。 典型的问题是WP管理栏位于导航栏的顶部。 因为我的导航栏srcoll隐藏代码是用javascript编写的，所以当管理员栏存在时，我不能使用之前使用的css代码在导航栏的顶部添加一个空格： body.admin-bar #navbar-section {
top: 32px;
} 所以我想知道如何在javascript中检测可湿性粉剂管理栏的存在，以便我可以使用以下代码在顶部添加空间： if adminbar present then
document.getElementById("n
浏览 12提问于2020-04-14得票数 0
回答已采纳
2回答
我有一个简单的角页与右侧的角材料导航。当我在app组件上编写所有代码时，一切都按预期工作，导航栏将按预期从工具栏和主页打开。
请参阅
但是，当我试图将应用程序根拆分为组件时，侧边导航会在工具栏上浮动，而不是像mode=" side“的导航条应该做的那样。
请参阅
我试着玩CSS / add fxFlex，但是行为还是一样
我在这里错过了什么？
浏览 1提问于2018-12-18得票数 2
回答已采纳
3回答
是否仅下载引导导航栏？
、、、、
我只想在我的网站中使用bootstrap导航栏，而不必下载所有的bootstrap代码，因为它会干扰我当前的类和div。
谁能告诉我在我的自定义下载中应该包括哪些选项？
我点击了navbar (它勾选了其他选项，我认为这些选项是navbar工作所必需的)，但在包含css之后，我的导航栏将无法工作。
我的代码中有Jquery和Bootstrap CDN链接，所以我非常确定它只是CSS。
谢谢，
浏览 50提问于2014-06-26得票数 12
回答已采纳
2回答
CSS垂直导航栏
、、、、
我试图在CSS中创建一个垂直导航栏。这是我的母版页中的代码：
这是我的CSS文件中的代码：
菜单如下所示：
正如您所看到的，导航栏并不是从列的顶部开始的。此外，页边距似乎不是单独包围每个按钮，而是所有按钮同时覆盖的区域。
我如何制作这个列表：
1)完全从顶部开始? 2)每个按钮周围的边距，而不是所有按钮覆盖的区域？
谢谢。
浏览 2提问于2013-06-20得票数 0
回答已采纳
我正在为我的wordpress站点添加第三个导航栏。我已经完成了代码，所以它看起来，但由于某些原因，当我设计它的样式，新的导航栏将不适合整个网站。你可以在这里的灰色条下面看到它：
我使用的Css代码是：
.bluenav {
background: #0082AB;
background-position: center;
margin: auto;
width: 100%;
height: 75px;
}
我很感谢你的帮助。我仍然是css的新手。
浏览 0提问于2016-05-06得票数 0
我使用一个称为custom.css的辅助文件来覆盖引导程序代码，我想知道如何创建一个只有当我的网站的访问者不在页面顶部时才激活的代码。
到目前为止，我使用bootstrap提供的默认代码创建了一个透明的导航栏。我唯一需要做的就是在访问者向下滚动时将其设置为execute：background-color: #color。
示例：
当我在页面顶部时，导航栏是透明的，但当我向下滚动时，导航栏变得不透明。
浏览 2提问于2015-04-15得票数 15
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
