Перейти к публикации

Проблемы с меню

Михал Иваныч
 Рассказать Подписчики 0

Рекомендованные сообщения

Михал Иваныч

Михал Иваныч 1

Опубликовано:
Опубликовано:

Нужна небольшая помощь по "допиливанию" меню. Сайт cassad.net     Нужно сделать, чтобы десктопное меню при уменьшении масштаба экрана отображалось корректно (в две строки, а не залазило бы на следующий блок). Также нужно поправить мобильные меню. При открытии мобильных меню сайт не опускается вниз и меню оказывается под картинками слайдера. Если кто-то может помочь, то прошу писать в личку.

Ссылка на сообщение
Поделиться на других сайтах
odys

odys 384

Опубликовано:
Опубликовано:

А здесь вообще народ бывает?

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

Ссылка на сообщение
Поделиться на других сайтах
Михал Иваныч

Михал Иваныч 1

Опубликовано:
Опубликовано: Автор

Ок. Даю код. Вот то что в индексе (main.tpl)

<style>
//.header_menu .open_menu_mobile
nav.site_navigation ul.menu > li:hover > a, nav.site_navigation ul.menu > li.current-menu-item > a,  .header_menu .open_menu_mobile, .header_meta .open_menu_mobile, .header_border, .pricing_box .header, .price_slider_wrapper .ui-slider-range, .onsale 
{
background-color: #000 !important;
}
.header_menu.light {
  background-color: #09336B !important;
}
.header_main-parent {height: 46px !important;}
nav.site_navigation ul.menu > li > a {
border: none !important;
}
.thumb_wrapper {
  max-height: 400px;
}
.content_meta span:after {
  margin-right: 4px;
  margin-left: auto;
  float: left;
}
nav.top_navigation ul.menu > li > a {
  padding: 1px 14px;
  line-height: 37px;
}
#s_vk{font-size: 20px;color: #898989;}
#s_ok{font-size: 20px;color: #898989;}
#s_tw{font-size: 22px;color: #898989;}
#s_fb{font-size: 19px;color: #898989;}
#s_gp{font-size: 20px;color: #898989;}
#s_yt{font-size: 22px;color: #898989;}
#s_ya{  font-size: 20px;color: #898989;}
#s_rss{  font-size: 20px;color: #898989;}
#s_vk:hover{color:#1D70CF;}
#s_ok:hover{color:#E29A00;}
#s_tw:hover{color:#4CADFF;}
#s_fb:hover{color:#1100AB;}
#s_gp:hover{color:#FF0000;}
#s_yt:hover{color:#171717;}
#s_ya:hover{color:#FF0000;}
#s_rss:hover{color:#DD7D10;}
.specproekt{
  background-color: red;
  position: absolute;
  font-size: 10px;
  font-weight: 400;
  top: 33px;
  height: 11px;
  line-height: 11px;
  padding-left: 2px;
  padding-right: 2px;
}
nav.site_navigation ul.menu > li > a {
  font-size: 14px;
}
.header_menu.light nav.site_navigation ul.menu ul.sub-menu {
  background-color: #0F7DAB !important;
}
    
nav.site_navigation ul.menu > li > a {
  font-size: 13px !important;
  font-family: serif !important;
  padding: 0px 15px !important;
  text-transform: uppercase;
}
</style>

<div class="sticky_menu header_menu light">
<div class="container">
<a class="open_menu_mobile"><i class="fa fa-bars"></i></a>
<nav class="site_navigation">
<ul class="menu">
<li><a href="#"><div class="logo_brand"><h1><a href="/index.php">CassadNews </a></h1></div></a></li>
<!--<li class="current-menu-item"><a href="/index.php">Главная</a></li>-->
<li><a href="/insayd/">Инсайд<br><span class="specproekt">СПЕЦПРОЕКТ</span></a></li>

<li class="menu-item-has-children has_cs_mega_menu"><a href="/politika/">Политика</a>
<ul class="sub-menu">
<li><a href="/politika/analitika/">Аналитика</a></li>
<li><a href="/politika/geopolitika/">Геополитика</a></li>
<li><a href="/politika/diplomatiya/">Дипломатия</a></li>
</ul>
</li>
<li><a href="/ekonomika/">Экономика</a>
<ul class="sub-menu">
<li><a href="/ekonomika/mirovaya-ekonomika/">Мировая экономика</a></li>
<li><a href="/ekonomika/finansy/">Финансы</a></li>
<li><a href="/ekonomika/promyshlennost/">Промышленность</a></li>
<li><a href="/ekonomika/tek/">ТЭК</a></li>
<li><a href="/ekonomika/tehnologii/">Технологии</a></li>
</ul>    
</li>
<li class="menu-item-has-children has_cs_mega_menu"><a href="/konflikty/">Конфликты<br><span class="specproekt">СПЕЦПРОЕКТ</span></a>
<ul class="sub-menu">
<li><a href="/konflikty/voyna-na-ukraine/">Война на Украине</a></li>
<li><a href="/konflikty/voyna-na-blizhnem-vostoke/">Война на Ближнем Востоке</a></li>
<li><a href="/konflikty/war_maps/">Военные карты</a></li>
</ul>
</li>    
<li class="menu-item-has-children has_cs_mega_menu"><a href="/russia/">В России</a>
<ul class="sub-menu">
<li><a href="/russia/vnutrennyaya-politika/">Внутренняя политика</a></li>
<li><a href="/russia/obschestvo/">Общество</a></li>
<li><a href="/russia/kultura/">Культура</a></li>
<li><a href="/russia/proisshestviya/">Происшествия</a></li>
<li><a href="/russia/regiony/">Регионы</a></li>
<li><a href="/russia/golos-sevastopolya/">Голос Севастополя</a></li>
<li><a href="/russia/armiya-i-opk/">Армия и ОПК</a></li>
</ul>
</li> 
<li class="menu-item-has-children has_cs_mega_menu"><a href="/ukraina/">Украина</a>
<ul class="sub-menu">
<li><a href="/ukraina/ukrainskiy-krizis/">Украинский кризис</a></li>
<li><a href="/ukraina/novosti-ukrainy/">Новости Украины</a></li>
</ul>
</li>
<li class="menu-item-has-children has_cs_mega_menu"><a href="/v-mire/">В мире</a>
<ul class="sub-menu">
<li><a href="/v-mire/evropa/">Европа</a></li>
<li><a href="/v-mire/blizhniy-vostok/">Ближний Восток</a></li>
<li><a href="/v-mire/aziya/">Азия</a></li>
<li><a href="/v-mire/afrika/">Африка</a></li>
<li><a href="/v-mire/yuzhnaya-amerika/">Южная Америка</a></li>
<li><a href="/v-mire/severnaya-amerika/">Северная Америка</a></li>
</ul>
</li>
<!--<li><a href="#">Ц.И.Г.Р.</a></li>-->
<li><a href="http://cassad.net/tv/" target="_blank">Медиа</a>
<ul class="sub-menu">
<li><a href="http://cassad.net/tv/videos/cassad/" target="_blank">Видео</a></li>
<li><a href="/fotoreportazhi/">Фото</a></li>
</ul>    
</li>
<li class="menu-item-has-children has_cs_mega_menu"><a href="/blogi/">Блоги</a>
<ul class="sub-menu">
<li><a href="/blogi/boris-rozhin/">Борис Рожин</a></li>
<li><a href="/blogi/aleksey-zotev/">Алексей Зотьев</a></li>
<li><a href="/blogi/sergey-kolyasnikov/">Сергей Колясников</a></li>
<li><a href="/blogi/karina-kazakova/">Карина Казакова</a></li>
<li><a href="/blogi/natalya-astahova/">Наталья Астахова</a></li>
<li><a href="/blogi/boris-kagarlickiy/">Борис Кагарлицкий</a></li>
</ul>
</li> 
<li><a href="/obschestvennaya-iniciativa/">Общественная Инициатива<br><span class="specproekt">СПЕЦПРОЕКТ</span></a></li>
</ul>
</nav>
</div>
<div class="header_border"></div>
</div>

А это css (отдельно для мобил и десктопа)

/*------------------------------------------------------------------
    Mobile site navigation
-------------------------------------------------------------------*/
.header_menu .open_menu_mobile {
    cursor: pointer;
    color: #fff;
    font-size: 21px;
    text-transform: uppercase;
    padding: 0px 10px;
    line-height: 45px;
    width: 45px;
    text-align: center
}
.header_menu.dark .mobile_site_navigation {
    color: #999
}
.mobile_site_navigation ul.menu_mobile > li > a {
    font-size: 18px;
    text-transform: uppercase;
    display: block;
    padding: 10px 0
}
.header_menu.dark .mobile_site_navigation ul.menu_mobile > li > a {
    color: #ddd;
    border-bottom: 1px solid #444;
}
.header_menu.light .mobile_site_navigation ul.menu_mobile > li > a {
    color: #444;
    border-bottom: 1px solid #eee
}
.mobile_site_navigation ul.menu_mobile > li:last-child > a {
    border-bottom: 0
}
.mobile_site_navigation ul.menu_mobile ul.sub-menu a {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px
}
.mobile_site_navigation ul.menu_mobile ul.sub-menu ul a {
    padding-left: 20px
}
.mobile_site_navigation ul.menu_mobile ul.sub-menu ul ul a {
    padding-left: 30px
}
.mobile_site_navigation ul.menu_mobile ul.sub-menu ul ul ul a {
    padding-left: 40px
}
.mobile_site_navigation ul.menu_mobile ul.sub-menu ul ul ul ul a {
    padding-left: 50px
}
.mobile_site_navigation ul.menu_mobile ul.sub-menu ul ul ul ul ul a {
    padding-left: 60px
}
.header_menu.dark .mobile_site_navigation ul.menu_mobile ul.sub-menu a {
    color: #999;
    border-bottom: 1px solid #444
}
.header_menu.light .mobile_site_navigation ul.menu_mobile ul.sub-menu a {
    color: #999;
    border-bottom: 1px solid #eee
}

/*------------------------------------------------------------------
    Site navigation
-------------------------------------------------------------------*/
nav.site_navigation {
    position: relative
}
nav.site_navigation ul {
    list-style: none;
    z-index: 8;
    padding: 0;
    margin: 0
}

/* Top links */
nav.site_navigation ul.menu {
    position: relative
}
nav.site_navigation ul.menu > li {
    float: left
}
nav.site_navigation ul.menu > li > a {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s;
    transform-origin: 50% 0;
    display: block;
    font-size: 16px;
    font-weight: 300;
    padding: 0px 18px;
    border:1px solid #1072ae;
    line-height: 45px;
    color: #f3f3f3
}
nav.site_navigation ul.menu > li:hover > a,
nav.site_navigation ul.menu > li.current-menu-item > a {
    color: #fff
}

/* Top links child */
nav.site_navigation ul.menu ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    min-width: 200px;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; 
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s
}
nav.site_navigation ul.menu li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    overflow: visible
}
.header_menu.dark nav.site_navigation ul.menu ul.sub-menu {
    background-color: #333
}
.header_menu.dark nav.site_navigation ul.menu ul.sub-menu li {
    border-bottom: 1px solid #444
}
.header_menu.light nav.site_navigation ul.menu ul.sub-menu {
    background-color: #349DC9
}
.header_menu.light nav.site_navigation ul.menu ul.sub-menu li {
    border-bottom: 1px solid #eee
}
nav.site_navigation ul.menu ul.sub-menu li {
    position: relative;
}
nav.site_navigation ul.menu ul.sub-menu li:last-child {
    border-bottom: none
}
nav.site_navigation ul.menu ul.sub-menu li a {
    color: #FFF;
    display: block;
    padding: 5px 10px
}
.header_menu.dark nav.site_navigation ul.menu ul.sub-menu li a:hover {
    color: #fff
}
.header_menu.light nav.site_navigation ul.menu ul.sub-menu li a:hover {
    color: #222
}

/* Top links child */
nav.site_navigation ul.menu ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%
}
nav.site_navigation ul.menu ul.sub-menu li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    overflow: visible
}
nav.site_navigation ul.menu ul.sub-menu li:last-child {
    border-bottom: none
}

/* Parent drop down */
nav.site_navigation ul.menu > li.menu-item-has-children > a {
    padding-right: 20px
}
nav.site_navigation ul.menu > li.menu-item-has-children > a:after {
    font-family: "FontAwesome";
    content: "\f107";
    font-size: 10px;
    position: absolute;
    right: 10px
}
.header_menu.dark nav.site_navigation ul.menu > li.menu-item-has-children > a:after {
    color: #999
}
.header_menu.light nav.site_navigation ul.menu > li.menu-item-has-children > a:after {
    color: #bbb
}
.header_menu.dark nav.site_navigation ul.menu > li.menu-item-has-children:hover > a:after,
.header_menu.light nav.site_navigation ul.menu > li.menu-item-has-children:hover > a:after,
.header_menu.dark nav.site_navigation ul.menu > li.current-menu-item > a:after,
.header_menu.light nav.site_navigation ul.menu > li.current-menu-item > a:after {
    color: #fff
}

/* Child drop down */
nav.site_navigation ul.menu ul.sub-menu > li.menu-item-has-children > a {
    padding-right: 20px
}
nav.site_navigation ul.menu ul.sub-menu > li.menu-item-has-children > a:after {
    color: #999;
    font-family: "FontAwesome";
    content: "\f105";
    font-size: 10px;
    position: absolute;
    right: 10px
}

/* Mega menu */
nav.site_navigation ul.menu ul.cs_mega_menu {
    padding: 10px;
    color: #999;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    height: auto;
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; 
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s
}
nav.site_navigation ul.menu li:hover > ul.cs_mega_menu {
    opacity: 1;
    visibility: visible;
    overflow: visible
}
.header_menu.dark nav.site_navigation ul.menu ul.cs_mega_menu {
    background-color: #333
}
.header_menu.light nav.site_navigation ul.menu ul.cs_mega_menu {
    background-color: #f9f9f9
}

 

Ссылка на сообщение
Поделиться на других сайтах
IgorA100

IgorA100 90

Опубликовано:
Опубликовано:

Уберите это из стилей

.header_main-parent {
    height: 46px !important;
}

И тут высоту не надо задавать

<div class="header_main-parent" style="height: 48px;">

 

Ссылка на сообщение
Поделиться на других сайтах
Михал Иваныч

Михал Иваныч 1

Опубликовано:
Опубликовано: (изменено) Автор

Спасибо. Не могу написать в личку. Система пишет, что юзер odys не может получать сообщения. Хотел узнать возможно ли здесь найти ответственного человечка для адаптации шаблона HTML под DLE. За оплату, конечно. 

Изменено пользователем Михал Иваныч
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...