Как уменьшить длину меню (тема не стандартная)

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Vladlezhnev, 8 дек 2015.

  1. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Здравствуйте! Подскажите пожалуйста, как найти ошибку, как уменьшить длину меню? Меню растянулось во всю ширину экрана, да так что появилась полоса прокрутки. По моему весь код перерыл, но так и не нашел, где проблема зарылась.
    Код:
    <div id="tm_menu" class="nav__primary sf-js-enabled sf-arrows">
        <div class="menu-shadow">
            <div>
                <ul>
                    <li class="yellow"><a href="./Shervik-детская обувь_files/Shervik-детская обувь.html"><i class="fa fa-home"></i><span class="hidden-sm">Главная</span></a></li>
                </ul>   
                    <p class="pink"></p><ul class="menu">
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=33" class="sf-with-ul">ОБУВЬ ДЛЯ МАЛЬЧИКОВ</a>
    <ul style="display: none;">
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=20"><i class="fa fa-chevron-right"></i>Зимняя обувь</a>
    </li>
    </ul>
    
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=25" class="sf-with-ul">ОБУВЬ ДЛЯ ДЕВОЧЕК</a>
    <ul style="display: none;">
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=32"><i class="fa fa-chevron-right"></i>Зимняя</a>
    </li>
    </ul>
    </li>
    
    </ul>
    <p></p>
                <ul>   
                <!-- ������ ������� -->
                    <li class="green"><a href="http://localhost/test5/index.php?route=account/account" title="Личный кабинет" class="dropdown-toggle sf-with-ul" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-sm">Личный кабинет</span> <span class="caret"></span></a>
                    <ul class="dropdown-menu dropdown-menu-left" style="display: none;">
                                    <li><a href="http://localhost/test5/index.php?route=account/register"><i class="fa fa-chevron-right"></i>Регистрация</a></li>
                    <li><a href="http://localhost/test5/index.php?route=account/login"><i class="fa fa-chevron-right"></i>Авторизация</a></li>
                                    </ul>
                    </li>
                </ul>
                    <!-- ������� -->
                <ul>   
                    <li class="red"> <a href="http://localhost/test5/index.php?route=checkout/cart" title="Корзина"><i class="fa fa-shopping-cart"></i> <span class="hidden-sm">Корзина</span></a></li>   
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
     

    Вложения:

    • скрин.png
      скрин.png
      Размер файла:
      603,5 КБ
      Просмотров:
      22
  2. Romans

    Romans Administrator Команда форума

    Сообщения:
    1.340
    Симпатии:
    692
    Помощь возможна только на реальном сайте, а не на локальном.
     
  3. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Благодарю. С этот вопрос решил 15 минут назад. Как оказалось, по нелепой случайности удалил контейнер с классом "container". Поместил меню в контейнер "container" и проблема сама собой решилась, но вот где его атрибуты не нашел. В образовательный целях подскажете, где найти его атрибуты?
     
    Последнее редактирование: 9 дек 2015
  4. bados

    bados Новичок

    Сообщения:
    27
    Симпатии:
    1
    И еще вопрос в эту тему, раз разговор про меню зашел - можете подсказать где копать чтобы сделать полоску меню на всю ширину сайта, но чтобы категории и поиск остались на местах?
    http://dolen.ru

    Заранее благодарю!
     
  5. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.566
    Симпатии:
    428
    Пользоваться отладчиком умеешь? Если нет, будешь задавать вот такие нелепые вопросы)))
    Макет страницы разбит на контейнеры. есть два типа контейнера это - с фиксированной шириной и fluid(полностью на всю ширину экрана) Твое меню как раз таки в классе .container, а тебе нужно оставить меню на месте, значит создаешь блок поверх .container и даешь ему визуальное оформление
     
  6. bados

    bados Новичок

    Сообщения:
    27
    Симпатии:
    1
    Не умею, скорее всего такие вопросы еще будут)) Но я постараюсь ограничить их количество :)
    Буду разбираться в том что Вы написали.
     
  7. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.566
    Симпатии:
    428
    А что тут разбираться, идете в header.tpl, находите элемент nav с #menu - это ваше меню, оболочка вашего nav это div.container
    Посмотрев стили видно что в css для #menu указаны лишь стили, ок. в header.tpl создаете поверх .container блок.div и указываете ему #menu а у nav его убираете, вот и и все.
    А дальше подправляете nav
     
  8. bados

    bados Новичок

    Сообщения:
    27
    Симпатии:
    1
    а можно перенести <nav id="menu" class="navbar"> поверх <div class="container"> ?
     
  9. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.566
    Симпатии:
    428
    Ну то что я и описал))
    Вы сделали, только это лишнее
    Код:
        background-image: linear-gradient(to bottom, #EE7600, #EE7600);
        background-repeat: repeat-x;
        border-color: #EE7600 #EE7600 #EE7600;
     
  10. bados

    bados Новичок

    Сообщения:
    27
    Симпатии:
    1
    я правильно понимаю что для того чтобы убрать скругление углов полоски этого меню нужно менять тут?
    @media (max-width: 767px) {
    #menu {
    border-radius: 4px;
     
  11. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.566
    Симпатии:
    428
    да, но как я помню у класса navbar в boostrap есть radius, поэтому выставляйте border-radius: 0;
     
  12. bados

    bados Новичок

    Сообщения:
    27
    Симпатии:
    1
    сделал так
    #menu {
    background-color: #EE7600;
    min-height: 40px;
    box-shadow: 0 0 5px 2px #ddd;
    border-radius: 0;
    }

    вроде бы работает :)