如何更改不同屏幕分辨率的主菜单项大小
June 24, 2015
本教程展示了如何根据不同的屏幕分辨率更改主菜单项的大小,以及如何将主菜单项保持在一行中.
我们的模板旨在保持菜单项尽可能大,而不会将菜单分成两行. 这是很重要的 navigation 良好的用户体验. 有时您需要添加比原始模板中更多的菜单项. 它可能导致菜单折叠成两行或多行. 解决出现问题的最简单方法是减少 font-size of your menu items. 我们将向您展示如何在不同的窗口宽度下实现这一点:
为了改变菜单 font-size,你应执行以下步骤:
-
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:
-
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.
-
选择要放置代码的文件. 你可以把它放在你网站的任何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
-
现在您需要指定 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; } }
-
保存CSS文件中的更改并将其上传到服务器. 你的最终结果应该是这样的:
请随时查看下面的详细视频教程: