程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Bootstrap4 navigation link active top border Style

发布于2023-11-18 07:46     阅读(1143)     评论(0)     点赞(9)     收藏(5)


Im trying to get Navigation Link styles like this

enter image description here

In the mobile View active link should be like this => enter image description here

For now Using border and border color i got this =>

enter image description here

Respective mobile view enter image description here

Any solution for get the expected results?

The current code

<nav class="navbar navbar-expand-lg navbar-light ">
    <a class="navbar-brand" href="#">
      LOGO
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a  class="nav-link " href="#">Home</a>
        </li>
        <li class="nav-item" >
          <a  class="nav-link" >Services</a>
        </li>
        <li class="nav-item" >
          <a  class="nav-link" >About</a>
        </li>

        <li class="nav-item" >
          <a  class="nav-link" >Contact</a>
        </li>




      </ul>
    </div>
  </nav>

sass for active link

.navbar-nav > .active a
  color: $nav-active-color !important


.navbar-nav > .active
  border-top: 3px solid $nav-active-color !important

解决方案


This would be a good use for the :before or :after psuedo classes, but without having any of your code to go off of I can only offer this vague suggestion.

As well, worth seeing the accepted answer here on a thread about nesting pseudo classes just in case you run into one of the outlined issues.

From there, you could add some keyframes and smooth out the transition to make a pretty seamless hover animation.

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:before {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  top: -4px;
}
<div></div>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/532554/422ccebebb3a114c9f2f/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容:(最多支持255个字符)