css - 响应式 CSS 导航栏中的徽标链接不起作用
问题描述
我是 CSS 新手,并试图在我的页面上启用响应式居中/导航栏菜单,并将徽标定位在导航菜单的左侧。一切在视觉和功能上看起来都不错,但是图像徽标链接不起作用(不会超链接),我不知道为什么。对我可能遗漏的内容有任何帮助或指导吗?非常感谢。这是我的 HTML/CSS。
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="https://www.mytestorganization.com">
<img src="/logo/content/items/925f35a5b1cb48379a2e2c416b4f03e4/data"
width="120" alt="myOrgLogo" />
</a>
<!-- This is optional and can be removed. -->
<div class="container-fluid">
<!-- This is what generates your burger menu icon on mobile -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> </button>
</div>
<!-- This is what gets hidden behind the burger menu icon -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="/pages/Nav1" class="dropdown-toggle" data-toggle="dropdown" role="button">Nav1</a>
<ul class="dropdown-menu">
<li>
<a href="#menu1">Menu1</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/pages/nav2" class="dropdown-toggle" data-toggle="dropdown" role="button">Nav2</a>
<ul class="dropdown-menu">
<li>
<a href="/pages/menu2">menu2</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/pages/nav3" class="dropdown-toggle" data-toggle="dropdown" role="button">Nav3</a>
<ul class="dropdown-menu">
<li>
<a href="#nav3">menu3</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/pages/nav4" class="dropdown-toggle" data-toggle="dropdown" role="button">nav4</a>
<ul class="dropdown-menu">
<li>
<a href="#menu4">Menu4</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/pages/nav5" class="dropdown-toggle" data-toggle="dropdown" role="button">nav5</a>
<ul class="dropdown-menu">
<li>
<a href="#menu5">menu5</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/pages/nav6" class="dropdown-toggle" data-toggle="dropdown" role="button">nav6</a>
<ul class="dropdown-menu">
<li>
<a href="#menu6">menu6</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/pages/nav7" class="dropdown-toggle" data-toggle="dropdown" role="button">nav7</a>
<ul class="dropdown-menu">
<li>
<a href="#menu7">Menu7</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</nav>
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
}
.navbar{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.navbar-nav {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.header-container .navbar-header {
width: 100%;
}
.navbar-default .navbar-toggle {
margin-top: 18px;
}
.navbar .container-fluid {
display: block !important;
}
.navbar.navbar-default .navbar-collapse.collapse {
overflow: hidden;
display: none !important;
}
.navbar.navbar-default .navbar-collapse.collapse.in {
display: block !important;
}
.navbar.navbar-default .navbar-nav {
display: inherit;
padding: 0 0 1rem 0;
}
.navbar.navbar-default .navbar-nav > li {
display: block;
}
}
解决方案
href="https://www.mytestorganization.com" 中的链接无效。没有此网址的网页。但是,如果您在将鼠标悬停在徽标上或单击徽标图像时正在寻找光标更改,则可以应用此样式。
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
cursor:pointer;
}
.navbar-brand:hover{
cursor:pointer;
}
推荐阅读
- android - 不同分辨率下的Android可绘制项目大小
- python - 如何使用 pygame 和 pyttsx 让动画人脸说话
- r - R:循环中的 gsub 替换名称
- javascript - 对 Array.prototype.reduce 的 polyfill 感到困惑
- javascript - 为什么按名称删除项目的方法不起作用?
- python - PyCharm virtualenv 找不到正确的 python 二进制文件
- z3 - 使用 SMTLib for z3 的 Datalog 中的循环关系
- sql - 如何在oracle中按结果对两组求和
- java - 为什么我收到 javax.net.ssl.SSLException: Received fatal alert:protocol_version for ant?
- hive - 确定在 72 小时内至少在七个不同地点进行过交易的客户——Hive