如何更改不同屏幕分辨率的主菜单项大小

本教程展示了如何根据不同的屏幕分辨率更改主菜单项的大小，以及如何将主菜单项保持在一行中.

如何更改不同屏幕分辨率的主菜单项大小

我们的模板旨在保持菜单项尽可能大，而不会将菜单分成两行. 这是很重要的 navigation 良好的用户体验. 有时您需要添加比原始模板中更多的菜单项. 它可能导致菜单折叠成两行或多行. 解决出现问题的最简单方法是减少 font-size of your menu items. 我们将向您展示如何在不同的窗口宽度下实现这一点:

为了改变菜单 font-size，你应执行以下步骤:

1. Locate the exact CSS selector that specifies the font-size 属性设置菜单项. 它需要一个web检查工具(FireBug或Google web inspector). 您需要检查菜单项链接，并在代码中找到 font-size is set. It is usually set for an element. 还可以使用速记字体属性设置大小. 请看下面的例子:

   			.sf-menu > li > a {
   			字体:粗体19px/22px;
   			}
   		

   Here 19px/22px specifies font-size/line-height:

   

2. Now as you got the CSS selector 你可以自己写规则. 在此之前，我们建议您选择正确的 font-size 通过更改web检查器工具中的属性值. 因为你选对了 font-size 值将小到足以使您的菜单项保持在一行中，您可以组成一个规则. For example:

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

   Pay attention to the !important attribute. 取决于模板 framework 在您要放置代码的文件中，您可能需要设置重要的规则 overwrite the default value. 因此，尝试使用没有此属性的代码，如果它不起作用，只有然后使用 !important attribute.

3. 选择要放置代码的文件. 你可以把它放在你网站的任何CSS文件中, 但是这里有一份我们为您准备的每个引擎的推荐文件清单.

   CMS Templates:

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

   E-commerce Templates:

   • Magento Themes /skin/frontend/违约/ themeXXX / css /风格.css
   • PrestaShop Themes /主题/ themeXXXX / css /全球.css
   • OpenCart Templates /目录/视图/主题/ themeXXX /stylesheet/stylesheet.css
   • ZenCart Templates / /模板/包括themeXXX / css /stylesheet.css
   • osCommerce Templates /css/stylesheet.css
   • Shopify Themes style.css.liquid

4. 现在您需要指定 font-size 的值 browser window widths. 要做到这一点，请将代码放入@中media query for each width. 使用检查工具调整正确的字体大小. Below you’ll find @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文件中的更改并将其上传到服务器. 你的最终结果应该是这样的:

   

请随时查看下面的详细视频教程:

如何更改不同屏幕分辨率的主菜单项大小