Будьте добры помочь с фиксацией меню на сайте

  • 15 Ответов
  • 600 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн mazim

Прочитал одну из ваших тем "Фиксированное горизонтальное меню Joomla 2.5" и решил установить  на сайте. Все зафиксировал.Но проблема в том, что и все пункты меню выровнялись в верхнем левом углу. Кто может помочь? Вот стиль.ксс.
Код
.sj-flat-menu {
background-color:#FFF;
text-align:left;
border: 1px solid #72d7ff;
}

ul.sj-flat-menu ,
ul.sj-flat-menu ul {
list-style:none ;
margin:0;
padding:0;
}

.sj-flat-menu     li{
background-color: rgba(112, 168, 0, 0.15);
padding-left:5px;
cursor: pointer;
border-bottom: 1px solid #70a800;
}

.sj-flat-menu .fm-item:hover a,
.sj-flat-menu li.fm-active > .fm-item a{
color: #FFFFFF;
    outline-style: style-line;
    border: none;
}

.sj-flat-menu li .fm-item .fm-link {
padding-left:5px;
position:relative;
display: block;
    margin-right: 25px;
}

.flyout-menu  li ul{
background: none repeat scroll 0 0 #121212;
    border: 1px solid #72d7ff;
    margin: 0;
    padding: 0;
    min-width: 200px;
}

.sj-flat-menu  li ul li .fm-item a {
padding-left: 26px;
background : url(../images/icon_dot.png) no-repeat left center;
display:inline-block;
    background-size: 6px;
}

.sj-flat-menu li .fm-item .fm-button {
width: 16px;
height: 18px;
margin: 0;
overflow: hidden;
    position:absolute;
right:3px;
top:50%;
margin-top:-10px;
}

.sj-flat-menu > li .fm-item{
position:relative;
}

.sj-flat-menu > li .fm-item a {
font-weight: bold;
    color: #ffffff;
    line-height: 26px;
    outline: none;
}

.sj-flat-menu  a img {
vertical-align:middle;
border: 0 none;
    height: auto;
    max-width: 32px;
width:32px;
padding:0 5px 0 0;

}
.sj-flat-menu  li.fm-last,
.sj-flat-menu  li ul li.fm-last{
    border: 0;
}

.flyout-menu  li .fm-container{
position: absolute;
    top: -1px;
display: none;
z-index: 1000;
padding:0;
}

.flyout-menu > li{
position: fixed;
z-index: 99;
top: 0%; 
right: 0%; 
left: 0%;
}

.flyout-menu  li li{
position: relative;
}

.flyout-menu.horizontal{
width:100%;
}


*

Оффлайн mazim

ссылку на сайт давайте, кто вам будет в уме код отрисовывать?
http://www.shvidkadopomoga.co.ua/


*

Оффлайн mazim

добавить
Код
#block-toolbar {
    position: fixed;
    width: 100%;
    z-index: 10;
}


исправить
Код
.flyout-menu > li {
    position: fixed;  - УБРАТЬ
Это все встиль.ксс?


*

Оффлайн mazim

нет. это - тайное послание в Альфа-Центавру.

спасибо друг!
нет. это - тайное послание в Альфа-Центавру.

Спасибо друг! А как его теперь растянуть на всю ширину страницы? Добавить width:100%;


*

Оффлайн mazim

layout.css - убрать float у #search
+ сделать весь фон верхней полосы зеленым
Я понял.Но почему-то ссулки в меню не работают.

*

Оффлайн mazim

layout.css - убрать float у #search
+ сделать весь фон верхней полосы зеленым
Спасибо с ссылками разобрался! Сейчас попробую с Фоном!

*

Оффлайн mazim

Спасибо огромное! Как + поставить тебе, друг?

*

Оффлайн effrit

  • *****
  • 7438
  • [+]822 / [-]7
  • effrit.com
    • Просмотр профиля
    • effrit.com
набрать 10 сообщений, чтобы можно было плюсовать ).
но более ценно будет помочь кому-нибудь из местных вопрошающих ).

*

Оффлайн mazim

набрать 10 сообщений, чтобы можно было плюсовать ).
но более ценно будет помочь кому-нибудь из местных вопрошающих ).
Спасибо!Буду пробовать.

*

Оффлайн mazim

набрать 10 сообщений, чтобы можно было плюсовать ).
но более ценно будет помочь кому-нибудь из местных вопрошающих ).
А может еще подскажешь. Как сделать, что бы это меню не пропадало при сжатом виде окна, а то на мобильном оно пропадает.

*

Оффлайн effrit

  • *****
  • 7438
  • [+]822 / [-]7
  • effrit.com
    • Просмотр профиля
    • effrit.com
ну по идее можно жестко попробовать прописать
Код
#toolbar {
 display:block !important;
}
но тогда надо будет условие для меню писать, чтобы оно откреплялось на мобильном виде, иначе каша будет.
изучай CSS @media, а шаблоны бери по-проще, чтобы понимать, что там происходит )

*

Оффлайн mazim

ну по идее можно жестко попробовать прописать
Код
#toolbar {
 display:block !important;
}
но тогда надо будет условие для меню писать, чтобы оно откреплялось на мобильном виде, иначе каша будет.
изучай CSS @media, а шаблоны бери по-проще, чтобы понимать, что там происходит )
Спасибо! Буду пробовать.