标签: navbar

为什么我的Bootstrap导航栏不是很响应？

我编写了一个带有三个链接的导航栏.导航栏应该是响应的,这意味着如果窗口变得足够小,链接应该消失(就像它们那样),并且应该出现一个带有三条水平线的新按钮(没有).

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="navbar-inner">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <button type="btn btn-navbar" class="navbar-toggle"
                    data-toggle="collapse"
                    data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span
                        class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/server">APL</a>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div
                class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="impressum.html">Impressum</a></li>
                    <li class="active"><a href="documentation.html">Documentation</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

为什么以下JSFiddle演示中的按钮保持不可见(相同的标记)？

http://jsfiddle.net/BaR3q/22/

css navbar responsive-design twitter-bootstrap twitter-bootstrap-3

Bas*_*ian

2014 07-07

0
推荐指数

1
解决办法

2571
查看次数

在 WordPress 子菜单项后添加 div

我正在尝试在 WordPress 菜单中的任何子菜单项之后添加一个 div。我正在处理functions.php文件中的以下代码：

add_filter( 'nav_menu_link_attributes', 'SubMenuCheck', 10, 3 );
function SubMenuCheck( $atts, $item, $args ) {
  if (in_array('menu-item-has-children', $item->classes)) {
    $args->after = '<div class="click">+</div>';
  }
  return $atts;
}

Run Code Online (Sandbox Code Playgroud)

上面的代码添加了新的 div，<div class="click">+</div>但在第一个“menu-item-has-children”类之后继续将其应用于所有父项和子项：

有谁知道为什么这是重复的？...我只希望 div 显示menu-item-has-children该类的项目。

谢谢

wordpress wordpress-theming menuitem submenu navbar

Fut*_*ebs

2021 05-25

0
推荐指数

1
解决办法

1430
查看次数

Xamarin iOS 透明导航栏

需要有透明的导航栏

https://developer.xamarin.com/recipes/ios/content_controls/navigation_controller/change_the_nav_bar_transparency/
尝试过这个但不起作用。

有什么建议吗？

transparent xamarin.ios navbar

Nik*_*ane

lucky-day

0
推荐指数

1
解决办法

1715
查看次数

Bootstrap 4导航栏固定在内容上方

我正在使用bootstrap4固定式导航栏，该导航栏在普通浏览器中可以正常运行。

但是，当我在移动设备（使用chrome dev选项的Galaxy S5）上进行测试时，内容从导航栏后面开始，我尝试在CSS中进行一些填充，但似乎无法使其正常工作。

下面是HTML和CSS的jsfiddle，页面内容从固定顶部的导航栏后面开始。

https://jsfiddle.net/8kefh4u7/6/

这也是我的CSS

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.epg-container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  background-color: black;
}
.epg-container ul.listings-grid {
  list-style-type: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  background-color: #262626;
}
.epg-container ul.listings-grid li {
  font-size: 20px;
  text-align: left; …

Run Code Online (Sandbox Code Playgroud)

html css php navbar bootstrap-4

Ran*_*rin

lucky-day

0
推荐指数

3
解决办法

2164
查看次数

滚动时某些内容与导航栏重叠

我正在使用 Bootstrap 在页面顶部生成固定的导航栏。除了一个问题之外，一切都工作正常。滚动时，页面的某些部分与导航栏重叠。整个页面主体被包裹在一个 div 中。

\n\n

以下是该问题的图片。

\n\n

https://i.stack.imgur.com/8eua5.jpg

\n\n

HTML：

\n\n

 <html>\n        <head>\n          <title>Bootstrap Example</title>\n          <meta charset="utf-8">\n          <meta name="viewport" content="width=device-width, initial-scale=1">\n          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">\n          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\n          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>\n\n            <title>Saasapp</title>\n            <%= csrf_meta_tags %>\n            <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">\n            <%= stylesheet_link_tag    \'application\', media: \'all\', \'data-turbolinks-track\': \'reload\' %>\n            <%= javascript_include_tag \'application\', \'data-turbolinks-track\': \'reload\' %>\n\n            <script>\n            $(document).ready(function(){\n                $(\'[data-toggle="tooltip"]\').tooltip();   \n            });\n            </script>\n        </head>\n          <body>\n\n        <div class="navbar" id="navbar">\n\n              <%= link_to "/", class: "navbar-logo" do %>\n              <%= image_tag \'MGE_logo.png\', alt: \'a\'%>\n              <% end %>\n          <a class="" href="javascript:void(0)"></a>\n          <a …

Run Code Online (Sandbox Code Playgroud)

html javascript css navbar

作者

2018 03-08

0
推荐指数

1
解决办法

4028
查看次数

绝对定位元素的最小和最大宽度

我有一个标准导航菜单，其中某些项目有子菜单。我希望子菜单有一个最小宽度和一个最大宽度。例如，子项的宽度至少为 150 像素，并且在分成多行之前可以增长到 250 像素宽。但是，由于子菜单绝对定位在相对定位的元素内部，因此子项目在分多行之前不会扩展到完整的最大宽度：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

nav > ul {
  font-size: 0;
}

nav > ul > li {
  position: relative;
  display: inline-block;
  font-size: 1rem;
}

nav > ul > li > a {
  display: block;
  padding: 1em;
  background-color: black;
  color: white;
}

.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
}

.sub-menu a {
  display: block;
  padding: 1em;
  color: white;
  background-color: red;
  min-width: 150px;
  max-width: …

Run Code Online (Sandbox Code Playgroud)

html css navigation navbar

joh*_*d23

lucky-day

0
推荐指数

1
解决办法

1184
查看次数

不用JS如何制作粘性导航栏？

我想创建一个粘性导航栏。滚动时它应该浮动在内容上方，如果页面滚动到顶部，它应该显示在内容之前。

我的实现几乎已经成功，但是当页面滚动到顶部时，部分内容被导航栏重叠。

我设法让它与 JS 一起工作，方法是在每次窗口大小更改时更新padding-topCSS 属性（请参阅函数）。#contentfixContentPadding

不用JS可以实现吗？

这是一个例子：

function fixContentPadding() {
  const navbarElement = document.getElementById("navbar");
  const contentElement = document.getElementById("content");

  contentElement.style.paddingTop = navbarElement.offsetHeight + "px";
}

document.addEventListener("resize", fixContentPadding);
document.addEventListener("DOMContentLoaded", fixContentPadding);

Run Code Online (Sandbox Code Playgroud)

#navbar {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: lightblue;
}

#content {
  min-height: 200vh;  /* to demonstrate scrolling */
  border: 1px solid lightblue;
}

Run Code Online (Sandbox Code Playgroud)

<div id="navbar">
  <a href="/">Hello, World!</a>
</div>

<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor …

Run Code Online (Sandbox Code Playgroud)

html javascript css navbar

Dem*_*olf

2021 12-17

0
推荐指数

1
解决办法

5860
查看次数

将搜索框移至导航栏末尾

我想移动导航栏末尾的搜索图标和搜索输入。我正在使用 Bootstrap 5.0.2 IDK 如何移动最后的图标和搜索框，因为我也是 Bootstrap、HTML 和 CSS 的新手。另外，我不想增加搜索框的大小，我希望其宽度为 50%，如果我将宽度设置为 100%，搜索框和图标将最终显示，但我希望其宽度为 50%并保留两者他们最后

.Banner {
  width: 100%;
  height: 75%;
  position: fixed;
  background-image: url(/NavBar/Img.png);
  background-size: cover;
  background-position: center;
}

.icon-white {
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.cont:hover .cube {
  color: black;
}

#searchform {
  float: right;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linux Coder</title>

  <link rel="stylesheet" href="/style.css">

  <!-- Bootstrap -->

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <!-- Bootstrap Icons --> …

Run Code Online (Sandbox Code Playgroud)

html css navbar bootstrap-5

作者

2023 04-04

0
推荐指数

1
解决办法

270
查看次数