Question

Я начинающий юзер uCoz`a и знаю базовые основы html и css. Создал свой сайт, как основу брал дизайн 1082. Я всё подстроил под себя, всё изменил, что мне мешало. Всё устраивает, но есть одно "но".

Когда меняешь масштаб сайта (примерно на 300-500%, или же заходишь на сайт с телефона с диагональю плюс/минус 7 дюймов), то дизайн, прямо говоря трансформируется, то бишь, подстраивается под размер. Расположение блоков меня устраивает, но на шапке разделы сайта превращаются в корявый квадратик меню, на который при нажатии вниз вылезают как раз скрытые разделы, а поиск вообще стал огромной пиксельной лупой.

Какой код, или как мне это изменить? Мне бы очень хотелось, чтобы разделы с поиском оставались в прежней форме.
Заранее спасибо!

Answer 1

1. Переходим в Таблицу стилей CSS, далее находим строку номер 1079 и удаляем стили:

#top nav {

 font-size: .929em;

 }

 #top .uMenuRoot ul {

 width: auto;

 overflow: visible;

 }

 #top .uMenuRoot ul ul {

 display: block;

 position: static;

 padding-left: 0;

 background: none;

 }

 #top .uMenuRoot ul ul a {

 padding-left: 55px;

 }

 #top .uMenuRoot ul ul ul a {

 padding-left: 90px;

 }

 #top .uMenuRoot ul a:hover {

 background: #ad977b;

 }

 #top .uMenuRoot li:hover ul {

 visibility: visible;

 opacity: 1;

 }

 #top .uMenuRoot li > span {

 line-height: 3.538em;

 }

 #top .uMenuRoot li li.has-submenu a:after,

 #top .uMenuRoot li li.has-submenu span:after {

 display: inline;

 content: '';

 position: static;

 }

 #top .uMenuRoot a {

 line-height: 3.538em;

 }

 

2. Находим строку номер 1134 и удаляем стили:

 .show-menu {

 color: #FF5900;

 display: block;

 }

 #top nav {

 display: none;

 margin-right: 0;

 padding-bottom: 4px;

 background: #2a72cc;

 box-shadow: inset 0 -4px rgba(0, 0, 0, 0.09);

 visibility: hidden;

 opacity: 0;

 }

 #top nav.nav-opened {

 display: block;

 visibility: visible;

 opacity: 1;

 }

 #top .uMenuRoot {

 white-space: nowrap;

 }

 #top .uMenuRoot li {

 display: block;

 float: none;

 }

 #top .uMenuRoot li.has-submenu a:after,

 #top .uMenuRoot li.has-submenu span:after {

 display: inline;

 content: '';

 position: static;

 }

 #top .uMenuRoot li:hover a {

 box-shadow: none;

 }

 #top .uMenuRoot li > span {

 line-height: 2.5;

 color: #fff;

 padding: 0 20px !important;

 }

 #top .uMenuRoot a {

 line-height: 2.5;

 color: #fff;

 padding: 0 20px !important;

 }

 #top .uMenuRoot a:hover,

 #top .uMenuRoot a.uMenuItemA {

 background: #977e5e !important;

 box-shadow: none;

 }

 #top .uMenuRoot ul {

 display: block;

 position: static;

 padding-left: 0 !important;

 background: none;

 visibility: visible;

 opacity: 1;

 }

 #top .uMenuRoot ul a {

 padding-left: 35px !important;

 }

 #top .uMenuRoot ul ul a {

 padding-left: 70px !important;

 }

Вроде все!

Comments

Чувак, спасибо большое! А то я уже всё перепробовал!