HTML和XML直接处理页面导航的部分
我有一个固定的导航栏： .导航栏 { 显示：内联块； 背景颜色：#2327fc； 列表样式类型：无； 边距：0 像素； 内边距：0px； z 索引：1； 宽度：100%； 位置...
我正在尝试创建一个响应式导航栏，它在桌面版本中有一个megamenu，在移动版本中有一个列表菜单。我的问题是，我不知道如何正确应用 html 类并且......
有人可以帮助我理解为什么“关于”链接不可点击。另外 2 个（作品集、评论正在工作），但一旦我对它们进行样式设置（.about），它们都不可点击。 很奇怪...
我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： &... 我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏： <nav class="navbar"> <a href="#About">About me</a> <a href="#Education">Education</a> <a href="#Portfolio">Portfolio</a> <a href="#Contact">Contact</a> </nav> 我尝试过在导航标签内部使用或不使用 div 容器。 这是相应的CSS： nav { text-align: center; position: fixed; top: 0; lef: 0; right: 0; height: 35px; padding-top: 15px; box-shadow: 0px 0px 8px 0px; -webkit-box-shadow: 0px 0px 8px 0px; -moz-box-shadow: 0px 0px 8px 0px; background-color: gray; width: 100%; z-index: 100; } 我也尝试过不使用 z-index: 100; 如果有人知道我缺少什么，或者如果我需要添加其他内容，我有兴趣看看它是什么以及我可以在哪里阅读它，以便我得到它。 谢谢:) 你的位置：固定。还有一个错字“左” 这里的每个人都帮助了我，因为我确实有一个打字错误，而且我最终确实做了我想做的正确的事情。 特别感谢 Johannes，我意识到，如果您像我一样尝试这样做，并使用 Bootstrap，请确保在位置后添加 !important：fixed;在你的 CSS 中，因为它会覆盖 Bootstraps 在这方面的默认属性，让你在向下滚动时无法将导航栏保留在屏幕上！ 不要忘记宽度应该是100% 导航 { text-align: center; position: fixed !important; width: 100%; } 您有一个针对 calss .navbar 的 CSS 规则，其中包含 position: relative。这会覆盖 nav 的固定设置 将 !important 添加到您的位置：nav的固定设置： nav { text-align: center; position: fixed !important; 等等 这应该可以解决它。 http://codepen.io/anon/pen/ZWBwEW
这是我当前的导航栏，徽标位于中间居中，但现在我需要添加一个搜索栏和一些像这样的图标：理想的导航栏 我当前的导航栏 这是我当前的导航栏，徽标位于中间居中，但现在我需要添加一个搜索栏和一些图标，如下所示： <header> <nav class="navbar navbar-expand-md "> <div id="nav" class="container-fluid"> <a class="navbar-brand d-md-none" href="index.html"> <img src="relogo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ANBIETER</a> </li> <a class="navbar-brand d-none d-md-block" href="index.html"> <img src="relogo.png" alt=""> </a> <li class="nav-item"> <a class="nav-link" href="#">ÜBER UNS</a> </li> <li class="nav-item"> <a class="nav-link" href="kontakt.html">KONTAKT</a> </li> </ul> </div> </div> </nav> </header> 添加在导航栏的最后一行，但现在徽标不再居中，图标位于下方 <li> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> </form> </li> 您应该使搜索栏的位置与导航栏绝对相关。 #nav-header { position: relative; display: flex; justify-content: center; } #nav-searchbar { position: absolute; right: 20px; width: 100px; } @media (max-width: 768px) { #nav-searchbar { left: 20px; right: 20px; width: 80%; } } <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <header> <nav id="nav-header" class="navbar navbar-expand-md d-flex items-center"> <div id="nav" class="container-fluid"> <a class="navbar-brand d-md-none" href="index.html"> <img src="relogo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ANBIETER</a> </li> <a class="navbar-brand d-none d-md-block" href="index.html"> <img src="relogo.png" alt=""> </a> <li class="nav-item"> <a class="nav-link" href="#">ÜBER UNS</a> </li> <li class="nav-item"> <a class="nav-link" href="kontakt.html">KONTAKT</a> </li> </ul> </div> </div> <div id="nav-searchbar"> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> </form> </div> </nav> </header> </body> </html>
移动版本中的菜单打开并工作，但单击菜单项后导航栏不会折叠...我从引导站点获取了css，js和导航栏： 哪里有问题？ <
我正在使用 Bootstrap 5 设计响应式页面，但我首先遇到了导航栏问题。切换按钮根本不起作用，单击时不显示任何项目。 我搜索过...
当导航栏在 Bootstrap 5 中折叠时将导航栏品牌移至中心
在 Bootstrap 5 中，当导航栏折叠时，如何将导航栏品牌移动到中心（当导航栏展开时，保持在左侧/右侧）
如果我在 laravel tweet navigation.blade.php 上添加新的导航链接，则路线未定义
我想从navigation.blade.php 文件中在导航栏中添加一个新按钮。但是在链接中添加并指定现有路线后，尝试加载的仪表板崩溃并显示
我正在使用 React 和 Tailwind CSS 开发一个作品集网站。当我设计导航栏时，我想要在它上面有悬停效果，所以我从这个 codepen 复制了悬停效果： 用于悬停效果的 codepen ...
我正在尝试使用汉堡菜单作为导航栏，但它不起作用。 我首先遇到一个问题，加载页面时在终端中收到“GET /javascript/menu.js 404”。这个我...
这是我的代码。我不知道问题所在。我也尝试过 bootstrap 5.2 和 5.1，但这也不起作用。我在 Chrome 和 Firefox 中都打开了它，但在任何人中都不起作用。有人有解决办法吗？ ...
我正在尝试自己实现汉堡包功能，效果很好。但是当我在移动设备上测试它时，导航链接被视为普通文本。顺风课没有进行
如何使navbar及其元素根据hover和scrollY而变化？
嗨，我正在制作一个根据悬停和滚动而变化的导航栏。 以下是要求： 当scrollY > 0时（这意味着导航栏不在顶部）： 导航栏背景颜色->“#fff” ch...
我试图在单击导航栏中的按钮后显示侧边栏。我做了JS功能，但是点击后没有任何显示
我试图在单击导航栏中的按钮后显示侧边栏。我已经制作了 JS 功能，但是单击导航栏按钮后没有任何显示。 这是我的 html 和 css 代码片段。 ...
谁能帮助谁， 我遵循了有关如何将鼠标悬停在导航栏中的“工作”上时创建带有下拉菜单的导航栏的视频教程。我能够得到这一部分，但视频教程没有...
我尝试在单击导航栏中的按钮后显示侧边栏。我做了JS功能，但是点击后没有任何显示，请帮忙
我尝试在单击导航栏中的按钮后显示侧边栏。我已经做了JS功能，但是点击导航栏按钮后没有任何显示，请帮忙。 这是我的 html 和 css 代码
我有一个带有 img 的导航栏。默认情况下，它位于页面左侧。我想将其显示在右侧 .标志-img{ 浮动：右； 边距：0px 15px 15px 0px； 我有一个带有 img 的导航栏。默认情况下，它位于页面左侧。我想显示在右边 .logo-img{ float: right; margin: 0px 15px 15px 0px; <a class="navbar-brand logo-img" href="#"><img src="images/my_graphic_transparent.jpg" alt="shield" width="90" ></a> 我尝试在样式区域中创建 .log-img，然后在类导航栏中使用它，但是图形不会移动到右侧 .logo-img{ float: right; margin: 0px 15px 15px 0px; <a class="navbar-brand logo-img" href="#"><img src="images/my_graphic_transparent.jpg" alt="shield" width="90" ></a> 如果您使用 Bootstrap-5，您可以在父容器中使用 d-flex 类作为链接，如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script> <title>Document</title> </head> <body> <nav class="navbar bg-light"> <div class="container d-flex justify-content-end"> <a class="navbar-brand" href="#"> <img src="/img/cat.svg" alt="Bootstrap" width="60" height="54"> </a> </div> </nav> </body> </html> 这是结果：
这是一把小提琴。 由于此问题中描述的有关创建响应式导航菜单的问题，我需要有两个相同的导航元素，一个对于小屏幕可见，另一个对于...
我（深深地..）遇到了导航栏的问题，当我们向下滚动时，导航栏消失了，尽管经典的CSS位置：固定分配给了它的类。 我认为这是由于我使用了一些 css 来实现视差