Bootstrap Navbar с активной кнопкой - я не могу очистить ее - PullRequest
Новая
       6

Bootstrap Navbar с активной кнопкой - я не могу очистить ее

0 голосов
/ 29 мая 2018

У меня есть этот старый сайт (Bootstrap 3.3.6). Я собрал его для клиента и заметил, что кнопка на панели навигации отмечена как активная, и я не могу ее очистить.

Этовизуально выглядит так:

Снимок экрана проблемы с кнопками 

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#registration">REGISTRATION &amp; PROGRAMS</a>
                </li>                                    
                <li>
                    <a class="page-scroll" href="#coaches">OUR COACHES</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">CONTACT</a>
                </li>                   
                <li>
                    <a href="https://www.facebook.com/groups/225011327510460/?fref=nf"><img src="img/FB-f-Logo50px.png" alt="Find us on Facebook!"></a>
                </li>
            </ul>
        </div>

При просмотре в активных условиях кнопка CONTACT отображается следующим образом: 

<li class="active">
                    <a class="page-scroll" href="#contact">CONTACT</a>
                </li>

CSS: 

a   {
font-family: "HypatiaSansPro-Regular";
color:#CC3333;}

.btn    {
background-color: #CC3333;
outline-color: #CC3333;}

.btn:hover,
.btn:focus,
.btn.active {
background-color: #993333;
outline-color: #CC3333;} 

.contact-section {
padding-top: 100px;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
background: #eee;}

Если я изменю порядок кнопок, у меня возникнет та же проблема для любой из последних кнопок.

Это одностраничный сайт начальной загрузки, страница имеет 3 якоря.Я могу отправлять личные сообщения на сайте, если это поможет.

Это небольшая проблема, но меня действительно беспокоит, что есть конфликт, и я не могу его очистить.Есть отзывы?

1 Ответ

0 голосов
/ 29 мая 2018

Bootstrap добавляет класс, который выделяет активный элемент: 

.navbar-nav>.active>a{
  color: #555;
  background-color: #e7e7e7;
}

Вы можете перезаписать этот селектор, поместив тот же селектор со значениями, которые вы хотите, в таблицу стилей css, загруженную после css начальной загрузки. 

.navbar-nav>.active>a{
  color: #777;
  background-color: transparent;
}

В качестве альтернативы вы можете каким-то образом удалить класс .active.Но я думаю, что начальная загрузка добавляет это автоматически.Так что это, вероятно, будет хлопот.

...