Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
| Následující verze | Předchozí verze | ||
|
skoda-ep:skoda-wlc-2016:main_menu [18.05.2017 03:20] Lukáš Čech vytvořeno |
skoda-ep:skoda-wlc-2016:main_menu [31.03.2021 08:05] (aktuální) Lukáš Čech [Special fields] |
||
|---|---|---|---|
| Řádek 1: | Řádek 1: | ||
| ====== Manage main menu ====== | ====== Manage main menu ====== | ||
| - | The main menu of BNR site is manually created. It basically represent all post categories, but you can full control it from administration. Open Appearance > Menu from left side menu. | + | The main menu is manually created. It should include the most important pages on the website and can also represent the list of categories. |
| + | |||
| + | Open Appearance > Menu from the admin panel on the left. | ||
| {{:skoda-ep:wp_bnr_menu.png|}} | {{:skoda-ep:wp_bnr_menu.png|}} | ||
| - | - First check what menu do you have selected. You can change it in section "Select a menu to edit". Choose what you want and press Select button. | + | - First check what menu you have selected. You can change it in the "Select a menu to edit" dropdown. Choose what you want and press Select button. |
| - | - Under **Menu structure** headline you can manage all menu items by drag&drop. Open detail settings by click small triangle in right of each menu items. | + | - Under **Menu structure** headline you can manage all menu items by drag&drop. To further customize each menu item click the "triangle" symbol on the right of each item. |
| - | - If you want to add new menu item, select type from left side boxes. In BNS we use only Categories. Note: When you add new menu item, it will be as last item in the list of menu items. | + | - If you want to add new menu item, select type from the left and click Add. Note: When you add new menu item, it will be the last item in the list of menu items. You can then use drag&drop to move the menu item where you want it. |
| - | - When you are ready, do not forgot to press **Save Menu** button to make your changes visible! | + | - When you are ready, do not forget to press **Save Menu** button to make your changes visible! |
| + | |||
| + | |||
| + | ===== Menu 2021 ===== | ||
| + | |||
| + | {{:skoda-ep:skoda-wlc-2016:menu:2021-preview-mobile.png?direct&200|}}{{:skoda-ep:skoda-wlc-2016:menu:2021-preview.png?direct&200|}} | ||
| + | |||
| + | - The new menu is limited to 2 lvls only | ||
| + | - Each menu item has a few info fields - preview image, icon and description. Hovering over menu items reveals additional information on the right side of the desktop menu. | ||
| + | - Mobile menu does not show either of these info fields | ||
| - | ===== Mobile menu switch ===== | + | ==== New menu activation ==== |
| - | By default, the mobile menu is shown only once the window is smaller than 768px as seen here: | + | Temporarily, before all markets release the new menu, it has to be enabled from the administration. Firstly, you must setup the menu so it contains all the data that are required - images, icons and descriptions of menu items |
| - | {{ :skoda-ep:wlc_menu_mobile.png |}} | + | Go to Admin panel -> Settings -> Primary Navigation |
| - | An administrator can define a different size for his site, so the mobile menu is shown even on larger screens. Look at the following example, where we have several items in the menu, this is a screen from a large desktop: | + | Check **Enable new menu** to use the new menu on frontend |
| - | {{ :skoda-ep:wlc_menu_before_wide.png |}} | + | {{ :skoda-ep:skoda-wlc-2016:menu:wlc-menu-2021-settings.png?direct |}} |
| - | When we view the site on a smaller screen, for example a tablet, the menu will not fit between the logos and jumps down as seen here: | + | ==== Special fields ==== |
| - | {{ :skoda-ep:wlc_menu_before_tablet.png |}} | + | Menu items have special fields, that can be shown in the desktop menu |
| - | To fix this issue, you can go to SKODA Options -> General and specify a different size when to break to mobile menu | + | {{ :skoda-ep:skoda-wlc-2016:wlc-menu-2021-legend-2.png?direct |}} |
| + | {{ :skoda-ep:skoda-wlc-2016:menu:wlc-menu-2021-legend-1.png?direct |}} | ||
| - | {{ :skoda-ep:wlc_menu_breakpoint_option.png |}} | + | If you need more space for the icon (e.g. larger image), you can use the checkbox "Widen icon space" |
| - | When you specify this size, you will see a mobile menu when the screen is smaller than this size | + | {{ :skoda-ep:skoda-wlc-2016:wlc-menu-2021-legend-3.png?direct |}} |
| - | {{ :skoda-ep:wlc_menu_after_tablet.png |}} | ||
| - | ==== How to determine the size to break the menu ==== | + | WordPress has a default description field, that can be activated from the screen options at the top. |
| - | First you need to open a mobile view in your browser, navigate to your site | + | |
| - | __Google Chrome__ | + | **DO NOT USE** this field, as the field is very limited and will not work on frontend |
| - | Press **CTRL+SHIFT+I** - when the console opens press **CTRL+SHIFT+M**. | ||
| - | At the top, you will see a dropdown, which could say "Galaxy S5", "iPhone 5", "Responsive" or similiar - click the dropdown and select **"Responsive"** | ||
| - | __Mozilla Firefox__ | + | {{ :skoda-ep:skoda-wlc-2016:menu:wlc-menu-no-description-default.png?direct |}} |
| - | Press **CTRL+SHIFT+M** | ||
| - | {{:skoda-ep:chrome_responsive_inspector.png|}}{{:skoda-ep:firefox_responsive_inspector1.png}} | ||
| - | Now you can play with the first numerical value (which is the width of the window) - in our case it shows **320** ... once you find the proper size where the menu is shown correctly you can use it in the options in administration | ||
| ====== Manage footer menu ====== | ====== Manage footer menu ====== | ||