Question

I have added a border-bottom to my active menu class

@media (min-width: 1040px) {
    #rbc-navbar.navbar-default .navbar-nav > li.active {
        border-bottom: 3px solid #56c7ff;
    }
}

How every when I hover over other links the links look like not at the same height because I have add the border at the bottom.

Question: With bootstrap navbar if I add a border bottom to a link how to make sure the other links all at the same height?

Codepen Example here Note the code pen is updated with working code now

CSS

#rbc-navbar.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}

#rbc-navbar.navbar-default {
    font-size: 16px;
    background-color: rgba(22, 30, 44, 1);
    border-bottom-width: 0px;
}

@media (min-width: 1040px) {
    #rbc-navbar.navbar-default .navbar-nav > li.active {
        border-bottom: 3px solid #56c7ff;
    }
}

#rbc-navbar.navbar-default .navbar-nav > li > a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(22, 30, 44, 1);
}

#rbc-navbar.navbar-default .navbar-nav > li > a:hover,
#rbc-navbar.navbar-default .navbar-nav > li > a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(63, 71, 81, 1);
}

#rbc-navbar.navbar-default .navbar-nav >.active > a,
#rbc-navbar.navbar-default .navbar-nav >.active > a:hover,
#rbc-navbar.navbar-default .navbar-nav >.active > a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(22, 30, 44, 1);
}

#rbc-navbar.navbar-default .navbar-toggle {
    border-color: #161e2c;
    color: #ffffff;
}

#rbc-navbar.navbar-default .navbar-toggle:hover,
#rbc-navbar.navbar-default .navbar-toggle:focus {
    background-color: #161e2c;
}

#rbc-navbar.navbar-default .navbar-toggle .icon-bar {
    background-color: #161e2c;
}

#rbc-navbar.navbar-default .navbar-toggle:hover .icon-bar,
#rbc-navbar.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #161e2c;
}

HTML

<div id="rbc-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="<?php echo base_url();?>">Riwaka Bowling Club</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>


        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li class="active"><a href="/">Home</a>
                </li>
                <li><a href="/about-us">About Us</a>
                </li>
                <li><a href="/contact">Contact Us</a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="">Members Login <i class="fa fa-sign-in" aria-hidden="true"></i></a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

最简单的方法是为所有菜单项添加透明边框，然后更改活动边框上的颜色。

@media (min-width: 1040px) {
    #rbc-navbar.navbar-default .navbar-nav > li {
        border-bottom:3px solid transparent;
    #rbc-navbar.navbar-default .navbar-nav > li.active {
        border-bottom-color: #56c7ff;
    }
}

Answer 2

试试这个css，

#rbc-navbar.navbar-default .navbar-nav > li:not(a:hover),#rbc-navbar.navbar-default .navbar-nav > li:not(.active) {
  border-bottom: 3px solid transparent;
}

#rbc-navbar.navbar-default .navbar-nav > li:not(.active) a:hover {
  border-bottom: 3px solid rgba(63, 71, 81, 1);
}

Codepen here

How to make sure bootstrap navbar links have same height when add border bottom

2 个答案: