Активный пункт меню в bootstrap

HAT

HAT

Гуру форума
Регистрация
6 Янв 2015
Сообщения
253
Реакции
56
Перевожу сайт на битрикс, на сайте был код
HTML: 
                            <div class="collapse navbar-collapse" id="navbar-collapse-menu">
                              <ul class="nav nav-pills nav-justified text-uppercase navbar-right">
                                  <li role="presentation"><a href="/portfolio">Портфолио</a></li>
                                  <li role="presentation"><a href="/price">Прайс</a></li>
                                  <li role="presentation"><a href="o-kompaniil">О компании</a></li>
                                  <li role="presentation"><a href="/otzyvy">Отзывы</a></li>
                                  <li role="presentation" class="active"><a href="/kontakty">Контакты</a></li>
                                </ul>
                            </div>

на битриксе он стал
HTML: 
div class="collapse navbar-collapse" id="navbar-collapse-menu">
<div id="bx_incl_area_1">
<ul class="nav nav-pills nav-justified text-uppercase navbar-right">

            <li><a href="/portfolio">ПОРТФОЛИО</a></li>
      
            <li><a href="/price">ПРАЙС</a></li>
      
            <li><a href="/o-kompanii">О КОМПАНИИ</a></li>
      
            <li><a href="/otzyvy">ОТЗЫВЫ</a></li>
      
            <li><a href="/kontakty" class="selected">КОНТАКТЫ</a></li>
      

</ul>

Подскажите пожалуйста, как правильно прописать селекторы, чтобы показать активный пункт меню
 
Последнее редактирование:
#navbar-collapse-menu .selected {}
 
  • Нравится
Реакции: HAT
не сработало, вот полностью код шапки
HTML: 
<body class="">



<div class="site-header">

<div class="site-area container-fluid scrolled-navbar">

<div class="row">

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container">

<div class="row">

<div class="navbar-header col-sm-3 col-md-4">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">

<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="/">

<img src="/bitrix/templates/master/img/logo-white.png" class="img-responsive" />

</a>

</div>

<div class="col-sm-9 col-md-8">

<div class="collapse navbar-collapse" id="navbar-collapse-menu">



<ul class="nav nav-pills nav-justified text-uppercase navbar-right">



<li><a href="/portfolio">ПОРТФОЛИО</a></li>



<li><a href="/price">ПРАЙС</a></li>



<li><a href="/o-kompanii">О КОМПАНИИ</a></li>



<li><a href="/otzyvy">ОТЗЫВЫ</a></li>



<li><a href="/kontakty" class="selected">КОНТАКТЫ</a></li>





</ul>

</ul>

</div>

</div>

</div>

</div>

</nav>

</div>

</div>

<div class="site-area container">

<div class="row">

<div class="block logo col-lg-4">

<a href="/"><img src="/bitrix/templates/master/img/logo-full.png" class="img-responsive center-block" /></a>

</div>

<div class="col-lg-8">

<div class="row">

<div class="block menu col-lg-12 hidden-xs visible-sm-block visible-md-block visible-lg-block">

<ul class="nav nav-pills nav-justified text-uppercase">



<ul class="nav nav-pills nav-justified text-uppercase navbar-right">



<li><a href="/portfolio">ПОРТФОЛИО</a></li>



<li><a href="/price">ПРАЙС</a></li>



<li><a href="/o-kompanii">О КОМПАНИИ</a></li>



<li><a href="/otzyvy">ОТЗЫВЫ</a></li>



<li><a href="/kontakty" class="selected">КОНТАКТЫ</a></li>





</ul>

</ul>

</div>

подтягивает стиль:

HTML: 
.navbar-collapse .nav li a, .navbar-collapse .nav li.active a {
    padding: 0px;
    min-height: 53px;
    line-height: 53px;
    vertical-align: middle;
    background: #99cc33;
    color: #fff;
    font-size: 17px;
    white-space: nowrap;
 
По коду видно у вас проблема с закрывающими тегами. Так же вижу, что это адаптивное меню.
Для малых экранов можно использовать селектор написанный мною выше. Для больших: .nav-justified .selected {}
Вместо .nav-justified можно использовать любой другой удобный вам родительский селектор, главное, что бы больше он в сайте не использовался, что бы стили не подхватывались в другом месте.

Вот код Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование модератором:
  • Нравится
Реакции: HAT
Большое спасибо за помощь! адаптивная менюшка подсвечивается как надо.
Как основную менюшку прописать? которая синяя Для просмотра ссылки Войди или Зарегистрируйся
 
не пашет главное меню
СЕЛЕКТ.JPG
 
HAT написал(а):
не пашет главное меню
Посмотреть вложение 84223
Нажмите для раскрытия...
Вы про background:#ff0000?
Посмотрите внимательно предыдущее мое сообщение. Селектор изменил. .nav-justified перекрывается более приоритетным родителем .block.menu
Вот какой селектор в предыдущем сообщении .block.menu li a.selected {background:#ff0000}
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху