How to change the main menu items 大小 for different 屏幕 决议s

This tutorial shows how to change the main menu items 大小 for different 屏幕 决议s and how to keep the main menu items in one line.

How to change the main menu items 大小 for different 屏幕 决议s

Our templates are designed to keep menu items as big as possible without breaking the menu into two lines. It is 重要的 for easy 导航 and nice user experience. Sometimes you need to add more menu items than there are in the original template. It may lead to menu collapsing into two or more lines. The easiest way to fix the arising issue is to reduce the 字体大小 你的菜单项. We are going to show you how this can be achieved for different 窗口的宽度:

In order to change the menu 字体大小, you should perform the following:

1. 找到确切的CSS 选择器 它指定了 字体大小 属性 for your menu items. It requires a web inspector tool (FireBug or Google Web Inspector). You need to inspect the menu item link and locate the spot in the code where the 字体大小 设置. It is usually set for an element. The 大小 can also be set up using the shorthand font 属性. Take a look at the following example:

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

   在这里 19 px / 22 px 指定 字体大小/行高:

   

2. 现在你有了CSS 选择器 you can write your own rule. Before doing that we recommend you picking up the right 字体大小 by changing the property value in the web inspector tool. As you’ve selected the correct 字体大小 value that’ll be small enough to keep your menu items in one row, you can compose a rule. 例如:

   		.sf-menu > li > a {
   		字体大小:16 px !重要;
   		}
   	

   注意 !重要的 属性. Depending on the template 框架 and file you’re going to place your code, you may need to set the rule as 重要的 to 覆盖 默认值. So, try to utilize the code without this property, if it doesn’t work, only then use the !重要的 属性.

3. Choose a file to place your code in. You can put it in any CSS file of your site, but there is a list of recommended files for each engine we’ve prepared for you.

   CMS模板:

   • WordPress主题 (WooCommerce/Jigoshop Themes) /wp-content/themes/themeXXXXX/style.css
   • Joomla模板(VirtueMart模板) /templates/themeXXXX/ css /template.css
   • Drupal主题 /sites/all/themes/themeXXX/ css /风格.css
   • Web (HTML5)模板 / css /风格.css

   电子商务模板:

   • 线上购物的主题 /皮/前端/default/themeXXX/ css /风格s.css
   • PrestaShop主题 /themes/themeXXXX/ css /global.css
   • OpenCart模板 /catalog/view/theme/themeXXX/样式表/样式表.css
   • ZenCart模板 /includes/templates/themeXXX/ css /样式表.css
   • osCommerce模板 / css /样式表.css
   • Shopify主题 style.css.液体

4. Now you need to specify the 字体大小 value for each of the defined 浏览器 窗口的宽度. To do that, put the code inside @媒体 查询 对于每个宽度. Use the inspector tool to adjust the correct 大小 of the font. 在下面你会发现@媒体 queries prepared for you:

   	  
   			@媒体 only 屏幕 and (min-width: 768px) {
   			.sf-menu > li > a {
   			字体大小:11 px !重要;
   			}
   			}		  
   			@媒体 only 屏幕 and (min-width: 980px) {
   			.sf-menu > li > a {
   			字体大小:14像素 !重要;
   			}
   			}		  
   			@媒体 only 屏幕 and (min-width: 1280px) {
   			.sf-menu > li > a {
   			字体大小:16 px !重要;
   			}
   			}
   		

5. Save the changes in the CSS file and upload it to the server. Your final result should look like this:

   

Feel free to check the detailed video tutorial below:

How to change the main menu items 大小 for different 屏幕 决议s