Как управлять размером элементов главного меню для разных разрешений экрана

Из этого туториала Вы узнаете, как изменить размер элементов главного меню для разных разрешений экрана и как сохранить главное меню одной строкой.

Как управлять размером элементов главного меню для разных разрешений экрана

Наши щаблоны сделаны так, что они сохраняют элементы меню настолько широкими, насколько это является возможным без перехода меню на следующую строку. Это важно для удобной навигации по сайту и лучшего опыта взаимодействия пользователя с сайтом. Иногда Вам нужно добавить больше элементов меню, чем было изначально в шаблоне. Результатом этого может стать то, что часть меню опустится на следующую строку. Наиболее простым способом решить данную проблему является уменьшение размера шрифта (font-size) элементов меню. Мы покажем Вам, как Вы можете сохранить меню на одной строке для разных разрешений экрана:

Для того, чтобы изменить размер шрифта (font-size), Вам необходимо сделать следующее:

1. Найдите селектор CSS, для которого задан атрибут размер шрифта (font-size) для элемента меню. Для этого Вам понадобится инструмент разработчика (FireBug или Google Web Inspector). Вам нужно проинспектировать ссылку меню и найти место в коде, где для неё задан размер шрифта. Как правило он задан для элемента <a>. Размер шрифта можно задать также в сокращенном атрибуте шрифта. Обратите внимание на следующий образец:

   			.sf-menu > li > a {
   			font: bold 19px/22px Open Sans;
   			}
   		

   где 19px/22px указывает размер шрифта/высоту строки:

   

2. Теперь, когда у Вас есть селектор CSS, вы можете создать собственное правило. Прежде чем сделать это, подберите подходящий размер шрифта (font-size), изменяя значение атрибута в инструменте разработчика. После того как Вы подобрали подходящий размер шрифта (font-size), который будет достаточно небольшим для того, чтобы ваше меню отображалось в одну строку, Вы можете создать правило. Например:

   		.sf-menu > li > a {
   		font-size: 16px !important;
   		}
   	

   Обратите вниманее на атрибут !important. В зависимости от движка сайта и файла в который Вы будете добавлять код, правило может быть нужно определить как важное для того, чтобы оно было приоритетнее чем значение по умолчанию. Попробуйте использовать правило без этого свойства. Если правило не сработает, только в этом случае используйте атрибут !important.

3. Выберите файл, в который Вы добавите код. Вы модете добавить его в любой файл CSS вашего сайта, но эсть файлы, в которые рекомендуется добавлять правила CSS. Мы подготовили для Вас список таких файлов для различных движков:

   Шаблоны CMS:

   • Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
   • Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
   • Шаблоны Drupal /sites/all/themes/themeXXX/css/style.css
   • Веб шаблоны (HTML5) /css/style.css

   Шаблоны Интернет-магазинов:

   • Темы Magento /skin/frontend/default/themeXXX/css/styles.css
   • Темы PrestaShop /themes/themeXXXX/css/global.css
   • Шаблоны OpenCart /catalog/view/theme/themeXXX/stylesheet/stylesheet.css
   • Шаблоны ZenCart /includes/templates/themeXXX/css/stylesheet.css
   • Шаблоны osCommerce /css/stylesheet.css
   • Темы Shopify style.css.liquid

4. Теперь Вам нужно указать значение размера шрифта (font-size) для каждого определённого значения экрана. Для того чтобы сделать это, вставьте код запроса @media для каждого размера экрана. Используйте интструмент разработчика, для того чтобы подобрать подходящий размер шрифта. Ниже Вы найдёте список запросов @media, подготовленный для Вас:

   	  
   			@media only screen and (min-width: 768px) {
   			.sf-menu > li > a {
   			font-size: 11px !important;
   			}
   			}		  
   			@media only screen and (min-width: 980px) {
   			.sf-menu > li > a {
   			font-size: 14px !important;
   			}
   			}		  
   			@media only screen and (min-width: 1280px) {
   			.sf-menu > li > a {
   			font-size: 16px !important;
   			}
   			}
   		

5. Сохраните изменения в файле CSS и зарузите файл на сервер. В итоге у Вас получится следующее:

   

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Как управлять размером элементов главного меню для разных разрешений экрана