Max Mega Menu WordPress tutorial

Free Custom Domain In First Year, Hosting, & 24/7 Support Included In Paid Plans. Sign Up For A WordPress.com Account To Start Building Your Website Or Blog Today WordPress Mega menu plugin will replace the natural WordPress menu into the mega menu. Max Mega menu plugin will help you to build a mega menu easily on your.. Part2: Setting Mobile and Tablet Menus https://www.youtube.com/watch?v=20IsQBM3aUgIn this video you will learn how to Add Mega Menu to Wordpress Website no m.. Select a widget to add to a Mega Menu using the selector at the top right of the Mega Menu editor. The widget selector will list all of the widgets installed on your WordPress site. You can add any WordPress widget(s) to your sub menu, for example your latest WooCommerce products, a slider, images, custom HTML, social icons etc

Video: WordPress Tutorial - WordPress for Beginner

Create a free website or easily build a blog on WordPress

Step 3: Add the Max Mega Menu widget to a sidebar. Under Appearance > Widgets, drag the Max Mega Menu widget ( not the Navigation Menu widget) to a sidebar and select the new menu location. The menu will now be displayed in your sidebar. You can repeat the same steps to create and display multiple Mega Menus on your site Installation. Max Mega Menu is a free plugin for WordPress. To install, to WordPress then go to Plugins > Add New and search for Max Mega Menu. After installation you will see the following changes made to your WordPress Dashboard: Dashboard > Appearance > Menus (menu management) There will be a Max Mega Menu Settings box on the. ESC closes all open sub menus. Max Mega Menu is developed with a focus on code quality, performance and usability. The only mega menu plugin with zero !important, block or inline CSS styles. Menus are styled using a single, static CSS file. Less than 2kb JavaScript (when gzipped) Responsive, Touch & Retina Ready

Max Mega Menu is an easy to use. Mega Menu. Plugin For WordPress. This mega menu is created using three widgets: A standard Calendar widget, a Text Widget displaying a Contact Form 7 shortcode and a Text Widget displaying a static google map. Fruits Hover over a sub menu item to change the image on the right Using Max Mega Menu Pro it is possible to make your menus stick to the top of the page as the user scrolls down. Making a menu sticky / fixed. To make a menu stick to the top of the page when the user scrolls down, go to Appearance > Menus.. Select the menu you'd like to become sticky and enable the Sticky option Under Mega Menu > Menu Themes you'll find a theme editor which allows you to edit the appearance of your menus.Max Mega Menu has one built in theme (Default) but you can create your own themes. The Theme Editor will let you modify all aspects of the Menu styling, including the font, color and size (height) of your menu(s) Hola Que Tal Amigos?FAVOR DARLE A »»»MOSTRAR MAS«««En esta ocacion les traigo un pequeño tutorial, de como configurar y usar el plugin MAX MEGA MENU. Uno de. Demo of Max Mega Menu 1.5.

WP Mega menu is a free responsive stunning WordPress plugin by Themeum.If you have many pages, images, and links to display in the menu system, you may choos.. The menu structure defines the tabs which are visible in the mega menu. It is possible to use the Mega Menu builder to design the content of each tab. This menu structure creates a tabbed mega menu: Displaying Widgets inside a tab. In our example, we are showing 3 image widgets within the Widgets tab. Clicking the blue Mega Menu button. If you don't like the video or need more instructions, then continue reading. Adding a Mega Menu in WordPress. First thing you need to do is install and activate the Max Mega Menu plugin. It is the best free mega menu WordPress plugin available in the market Mega menus are a great option for a wide variety of WordPress sites. In the words of research-based user experience experts, Nielsen Norman Group, mega menus work well for site navigationThey are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.. That's a pretty good summary — mega menus provide a user. That should hide your mobile menu header and reveal the desktop on even on smaller screens. Then go to Mega Menu > Menu Themes > Mobile Menu: Uncheck Disable Mobile Toggle. Check Sub Menu - Force Full Width. Check Sub Menu - Overlay Content. Set the Toggle Bar Height to 90px. I think that should do it

Take a look (and then return to the tutorial, obviously!) UberMenu - WordPress Mega Menu Plug 1. Create the Main Menu Bar. The main menu bar consists of five items: Home, Holidays, About, Blog, and Contact. The dropdown mega menu will belong to Holidays, while the other menu items will just stand on their own. Here's the HTML that marks up. AP Mega Menu is a FREE WordPress plugin, where you can easily add widgets column wise on horizontal as well as vertical mega menu, it is a built in visual me.. With Max Mega Menu and Elementor you can create custom menus or mega menus.To create mega menu use Max Mega Menu plugin - https://wordpress.org/plugins/megam.. If you have been dreaming of building a stunning mega menu on your WordPress site, our WP Mega Menu plugin is the ultimate solution. You can use Mega Menu for free to create rich and stunning navigation menus for your website. Make menu themes, and customize the styles using drag-and-drop tools. Beautify the menu items with custom colors, fonts.

WordPress.com (Official Site) - Best WordPress Website Builde

  1. Sub Menu Not Clickable. Started by: digidoda. 2; 2; 3 weeks, 4 days ago. digidoda. I want to open one collapsible menu at one time on max mega menu mobile header. Started by: bhanuka4466. 2; 2; 3 weeks, 4 days ago. bhanuka4466. Different font colour of HOME page menu. Started by: jelenaxxy. 2; 1; 3 weeks, 5 days ago. megamenu. Apply Style on.
  2. If you want to create a mega menu for your WordPress site, you have two general approaches Option 1: See if your theme supports mega menus. Some themes offer built-in mega menu support.For example, the Hestia theme includes built-in functionality to create a mega menu.. Unfortunately, I can't tell you whether or not your theme supports a WordPress mega menu, nor can I give you a tutorial.
  3. 11. How to Create a WooCommerce Shop Page Using Oxygen. 12. How to Build a WooCommerce Single Product Template using Oxygen. 13. How to Build the WooCommerce Cart, Checkout, and Account Pages using Oxygen. 14. How to Build a Custom Dropdown Megamenu in Oxygen. 15
How to set Max mega menu in wordpress - YouTube

Max Mega Menu is developed with a focus on code quality, performance and usability. The only mega menu plugin with zero !important, block or inline CSS styles. Menus are styled using a single, static CSS file. Less than 2kb JavaScript (when gzipped) Responsive, Touch & Retina Ready Under Appearance > Menus, create a new menu and assign it to the new menu location. Step 3: Add the Max Mega Menu widget to a sidebar. Under Appearance > Widgets, drag the Max Mega Menu widget to a sidebar and select the new menu location. The menu will now be displayed in your sidebar Building navigation menus are quite simple and there are a variety of ways to go about it. In this tutorial, I'll show you three ways for customizing the menu. I will demonstrate how to build one without a plugin, how to create a sticky or floating menu, and how to use the Max Mega Menu plugin. Method 1: Customizing the Menu without Plugin QuadMenu is a WordPress Mega Menu designed for both desktop and mobile devices. This responsive and mobile menu has a touch interface that improve your user experience and allow you to create mega, tabs and carousel megamenus without coding skills

Max Mega Menu Pro WordPress Plugin Features. Add interactive elements. Use with your existing theme. Easy Drag & Drop editing. Unlock the full potential of Max Mega Menu. WooCommerce & Easy Digital Downloads. Fine grained control over menu item styling Well, thanks to WordPress, you can get a mega menu without having to write code or even hiring a web developer. The easiest way to get a mega menu is to simply upgrade one of the best mega menu WordPress themes. It will be cost-effective and you will have a fully-functional mega menu that blends well with the design

Max Mega Menu Elementor for WordPress - The Complete Guide

WordPress Mega Menu Plugin - Max Mega Menu Tutorial Best

The first step is to add a media query for the mega menu styling (if you need it). In your theme's stylesheet, add this: 1. 2. 3. @media screen and ( min-width: 500px ) {. } You can change the min-width value to whatever works on your theme and corresponds to the media queries already present for any burger menu Max Mega Menu? Resolved qvbreugel. (@qvbreugel) 3 months, 4 weeks ago. Dear, I read multiple topics about Max Mega Menu, however, I didn't really find the answer I was looking for. Is it correct that this plugin is compatible with Max Mega Menu? If so, how do I use it? Thanks in advance In the past, creating a mega menu was difficult and time-consuming. However, right now, everything becomes much easier and more customizable. Below themes have been using Thim Core as their core processor: Eduma v3.x - The best Education WordPress Theme. MagWP - Magazine WordPress Theme QuadMenu is a WordPress Mega Menu that will allows you easily integrate the menu in your theme's project. This plugin allows you to import the menu created with Max Mega Menu, one of the most popular menu plugins for WordPress. Features: Import Max Mega Menu themes; Import theme colors and fonts; Import Max Mega Menu items; Import menu item.

Regular Mega Menu. In a regular menu the parent menu item (A) that will house the mega menu columns is given the css class as shown above.Each direct sub item of that (B) will be used to create each column.For example, If you have a four column mega menu layout, there should be four direct children Step 1 - Navigate to the Appearance > Menus section on your WordPress sidebar and select the 'Create A New Menu' link to create a new menu, or edit an existing one.. Step 2 - Choose the first level menu item that you wish to open a mega menu with. To enable the Fusion Mega Menu, click the Avada Menu Options button on your chosen menu item, which will launch the Avada menu settings window You can easily create some simple mega menus with 1,2,3,4,5 or 6 columns by simply check options to your parent menu item. First, create your menu. Then check Enable megamenu in the parent item you want to have a mega menu dropdown on. Also, enter a number between 2 to 6 in Megamenu columns based on how many columns you want for your mega menu

Learn how to create a mega menu (full-width dropdown menu in a navigation bar). (max-width: 600px) { .column Try it Yourself » Tip: Go to our CSS Dropdowns Tutorial to learn more about dropdowns. Tip: Go to our Clickable Dropdowns to learn more about clickable dropdowns. Tip: Go to our CSS Navbar Tutorial to learn more about navbars QuadMenu is a WordPress Mega Menu that will allow you easily integrate the menu in your theme's project. This plugin allows you to create mega menus, tabs menus, and carrousel menus in a simple and native way converting your existing menu into a powerful tool Max Mega Menu is the only free option on this list, which might explain why it's so popular with over 100,000 active installs according to the WordPress.org plugin directory.. Max Mega Menu is a lightweight solution that works by automatically converting your existing menus into mega menus which you can then style and add widgets to using built-in settings options

Here you can find a lot of options to fully customize the menu elements. Appearance > Menus > Menu > Mega > Columns. To include new columns in the mega menu just click the Column button, at the top left corner of the columns box. A new column will be included in the menu with the default size of 12 columns in mobile devices and 6 columns in tables This is an easy-to-use Mega Menu WordPress plugin that is fully compatible, including with WPBakery Page Builder (Visual Composer). This WordPress plugin is convenient, easily customizable that allows you to create a custom responsive mega menu and add modern and great navigation on your site. Standard menu

Build Mega Menu for any Wordpress Website using Max Mega

  1. Follow these steps to do just that: Step 1 - From the WordPress dashboard navigate to Appearance > Menus. Step 2 - Select the menu item under which you want to add a mega menu. Step 3 - Expand this menu item and click on the Astra Menu Settings button. Mega Menu. Tick the checkbox for the Enable mega menu option
  2. g more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we'll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features
  3. > Plugins > Add New to upload the file you downloaded. Activate the extension. Click Save Changes. More information at: . Usage Storefront Mega Menus [

Languages: English • Menus 日本語 Slovenčina • 中文(简体) • (Add your language). Navigation Menu is a theme feature introduced with Version 3.0.WordPress includes an easy to use mechanism for introducing customised navigation menus into a theme. In order to incorporate menu support into your theme, you need to add a few code segments to your theme files Choose from over 600 Premium mega menu Templates from the #1 source for mega menu Templates. Digital assets subscription. Hire a freelancer. Tutorials & courses. Create designs, videos & mockups. Join the WordPress 5.7.x 52 WordPress 5.6.x 88 WordPress 5.5.x 100 WordPress 5.4.x 98 WordPress 5.3.x 83 WordPress 5.2.x. UberMenu - WordPress Mega Menu Plugin - We like this plugin for making automated menus, like from your current blog posts. WordPress Menu Plugin — Superfly Responsive Menu - Go for this plugin if you like vertical menus. Mega Main Menu - This is great for a cheaper premium version of a mega menu

Max Mega Menu WordPress plugin With mobile browsing on the rise, ensuring that your menus are still readable on mobile devices is key. WP Mobile Menu pairs with any responsive theme to help you create a navigation system for your site's users who are on the go Max Mega Menu is a popular free WordPress menu plugin that's been actively installed over 300,000 times. If you're looking for a free way to add mega menus to your WordPress website, Max Mega Menu could be a good option WP Mega Menu plugin is an easy to use plugin for creating beautiful, customized menus for your site that show categories, subcategories and posts. 699731 Happy Users! Menu

Mega Menus - Getting Started Guide - Max Mega Men

Widget - Max Mega Menu - WordPress Mega Menu Plugi

Installation - Getting Started Guide - Max Mega Men

Max Mega Menu - WordPress plugin WordPress

Max Mega Menu - WordPress Mega Menu Plugi

Max Mega Menu – WordPress plugin | WordPress

How to add mega menus in WordPress. At very first, install and activate the Max Mega Menu plugin. It is the best free WordPress plugin available in the market. For more information, see our step by step guide on how to install a plugin in WordPress. After the activation, the plugin will add a new menu item, Mega Menu, to your WordPress admin menu JetMenu is a first-class plugin that allows creating a mega menu with Elementor.Add relevant content to a menu using appropriate widgets, and style it up according to the needs. Creating a Mega Menu. 1 Step— Select or Create Mega Menu. Before starting the work, make sure that the JetMenu plugin is currently installed and active on the website Hello dear all the question how to add tabbed content to a Wordpress Max-Mega-Menu !? i need to add tabbed-content to a wordpress-menu: is this doable!? is this possible. note: i ve installed the.

How to create a Sticky WordPress menu - Max Mega Men

Beschreibung. Max Mega Menu wandelt dein vorhandenes Menü oder deine vorhandenen Menüs automatisch in ein Mega-Menü um. Du kannst dann ein beliebiges WordPress-Widget zu deinem Menü hinzufügen, dein Menü mithilfe des Theme-Editors neu formatieren und das Menüverhalten mithilfe der integrierten Einstellungen ändern Bootstrap Mega Menu. Bootstrap's mega menu is a navigation component which enhances the standard navbar features.Its extended dropdown contains images and categorized links. It could contain a smaller version of your sitemap and images. You can split it into categories and by doing so, enhance the UX of your website

If you want to create a truly epic menu with loads of links, we've got a tutorial on how to create a mega menu in WordPress. This lets you create a drop-down with lots of items including images. Mega menus are a great option if you have a large site, like an online store or news site. This type of menu is used by sites like R, Buzzfeed. divi generatepress heromenu max mega menu storefront ubermenu wp mega menu. Mega. QuadMenu is the best and the most powerful WordPress mega menu plugin, configure it fast & easy to drag & drop admin panel. Purchase Now Download now. Promotional prices A lightweight jQuery plugin which generates a responsive, customizable, sticky, mobile-compatible, SEO-friendly, multi-column mega menu from nested HTML lists. The plugin automatically collapses the mega menu into a multi-level drop-down navigation for better visibility and readability on mobile devices Some of Max Mega Menu's core features are: Completely retina ready and touch responsive; It provides features for submenu styles, hamburger menus, and off-canvas menu styles; A colossal number of premium features, even on the free version; Custom CSS3 animations, fade, hover, and additional menu effects; Price. Max Mega Menu is a freemium plugin 1. In the WP dashboard go to Plugins > Add New. 2: Click on the Search Plugins field and search for quadmenu. 3: Click the Install Now button and then Activate in the Astra Mega Menu plugin. 4: Click the Install Now button and then Activate in the WordPress Mega Menu plugin. After activating the QuadMenu you'll be redirected to the.

Menu Styling - Getting Started Guide - Max Mega Men

Tips For Using Mega-Menus In WordPress. There are many WordPress plugins, such as WP Mega Menu Pro, that allows you to install a mega-menu on an existing WordPress website. However, the best way to ensure a seamless experience is to use a theme that comes with a built-in mega-menu Here you can see the Apple-inspired popup mega-menu we will create in this tutorial: The menu is triggered when the user clicks on the hamburger icon. This tutorial is just the tip of the iceberg in terms of what can be accomplished following the same steps: menus with forms, images, sliders and more In this case, the site uses a mega menu so it expands when you hover over one of the elements. But there are cases where a sticky menu wouldn't work. For example, the Guardian website has a large header with the menu below that. If the menu was made sticky, it would mean that it and the header took up way too much of the screen space Hello guys! In this tutorial I will teach you how to create a pure CSS3 Mega Menu. Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content. The design of this mega menu can be found on the The Bricks UI. Let's start with the HTML markup

Max Menu - Free WordPress Mega Menu Plugin - YouTube

Wordpress Tutoriales Max Mega Menu [Plugin FREE VERSION

Creating a basic mega menu in Hestia. We've made it easy to set up a basic mega menu within the theme itself by using classes. First of all, you must create a new menu. Go under Dashboard > Appearance > Menus. Click on Screen Options at the top and make sure that the CSS Classes option is enabled. If it's not, make sure you enable it Download free & premium responsive bootstrap templates with mega menu from ThemeWagon. An exclusive collection of well designed templates with mega menu. ThemeWagon offers an wide array of category-oriented Free and Premium Responsive Bootstrap HTML Templates and WordPress Themes that covers all kinds of templates or themes a developer may. 9. Evernote. Evernote is a famous electronic note-taking data management software. The whole site is very uniform green. In the mega menu, when the mouse is over to the secondary menu option, the entire option section will turn green. 10. Beyond Trust. This website's mega menu features two horizontal menus

Max Mega Menu - Free WordPress Mega Menu Plugin - YouTub

Responsive Menu Builder. Create your custom WordPress menu in a few easy steps. HeroMenu allows you to easily and intuitively create a slick and professional WordPress menu. From the most complex Mega Menu, rich with features, down to the simplest of menus with simple drop-downs, HeroMenu will have any desired menu up and running within. SharePoint Online mega menu and Site Customizations. May 30, 2021. January 27, 2020 by Rajkiran Swain. This SharePoint tutorial, we will discuss how to create a SharePoint Online mega menu. Also, how to change look and feel, theme, header, footer, etc in a modern SharePoint site. Complete SharePoint Training Course Just for $199 (Just for Today Cara membuat menu di WordPress cukup mudah untuk dilakukan. Seperti diketahui, WordPress merupakan CMS yang paling mudah untuk digunakan, hal ini terbukti dari jumlah pengguna WordPress paling banyak jika dibandingkan CMS lainnya.. WordPress merupakan salah satu platform yang dapat digunakan untuk berbagai jenis website sesuai kebutuhan, mulai dari membuat blog, membuat wordpress sampai. Mega Main Menu - WordPress Menu Plugin. Awesome responsive menu plugin. Features: icons, sticky, mega dropdowns variations, custom color scheme, fully customizable. You can place any content in dropdowns: links, text, images, widgets and shortcodes. Custom dropdowns so easy with Mega Main Menu

WP Mega Menu - A WordPress Mega menu Plugin Tutorial

Menu Dropdown. This theme has a built-in multi column menu system. Menus are created using the core WordPress Menu manager. These images shows how you should structure your menus. How to set up a Multi-column Menu. Creating a Simple dropdown. Creating a multi-column dropdown. Creating multi-column dropdown with image. Cant see CSS Classes or. 6. Max Mega Menu. The Max Menu Menu plugin works on multiple levels of your website design. Overall, it converts any existing WordPress menu into a mega menu-a menu that shows all page options even if there are dozens of them (perfect for eCommerce sites or online magazines) Mega Menu Compatible Blossom Shop is compatible with the Max Mega Menu Plugin that will help you organize and display your navigation in the most appealing way by displaying your menu items with pictures. Social Media Integration. Social media on your website will also help you boost your business' engagement Navigation menus are having a bit of a moment in the spotlight. From burger menus for mobile through mega menus for stores to sticky menus for enhanced user experience, there's a great choice in the way you can present your navigation menu in your WordPress site. But what if you want to create a straightforward menu with a few top-level items and some more items that drop down from them when. This Wordpress menu plugin will allow you to quickly and easily create drop down mega menus from any Wordpress custom menu. The plugin can handle multiple mega menus per page, offers a choice of animation effects (fade or slide), the option to set the drop down sub-menu to full width plus the choice to activate the menu using either hover or click

Tabbed Mega Menu - Max Mega Menu - WordPress Mega Menu

Added new typography settings (header title, header sub title) Added custom bbPress role name and badge color settings Added new setting (remove bbPress breadcrumb menu) Added Max Mega Menu plugin to the compatibility list Updated language file (.pot) Version 3.4 May 15th, 2020. Added new theme setting (Maximum topic title length) The WordPress Menu System bases the menu items it saves on the data it receives from the client side via the $_POST array. (no menu item limit, because max_post_vars does not exist) Host upgrades server PHP to 5.3.9+ even in a mega menu. The general rule of thumb is that having more than 100 links on a page can have a negative impact on.

How to Add a Mega Menu on Your WordPress Site (Step by Step

Xtocky - is a professional WooCommerce WordPress theme, built exclusively for online shopping and It was built for your digital store, men store, women store, clothing store, electronics shop, furniture store, hi-tech store, watch store, book store, cosmetics shop, luxury jewelry, Sunglass shop, Cycling shop and accessories store Web Slide mega menu is the Fastest-Selling and Next-generation website navigation on the Envato marketplace, Built with HTML, CSS3, Bootstrap 4, and Small jQuery. It comes with different types of dropdown and mega menu options. With the Web Slide mega menu, by adding some code snippet and CSS and JS files, you can create a mega menu in just. A note on fixed menus. Fixed menus, by nature, may be cut off by the extents of the viewport (browser window size, device screen, etc). Anything that doesn't fit on the screen will be inaccessible. Please keep this in mind if you have very large submenus. Requirements. WordPress 3.9+ UberMenu 3.0+ jQuery 1.11+ (included with WordPress 3.9+

How To Build a Mega Menu on Your WordPress Website Elemento

Download Now. This and other 4000+ plugins and themes can be downloaded if you are premium member for only 7 $4000+ plugins and themes can be downloaded if you are premium member for only 7 Mega menus are a growing trend in web design (see Mega Menus: The Next Web Design Trend from Sitepoint). For sites that involve a lot of pages and/or products, a mega menu may be able to improve navigation and usability. In this post we'll look at 25 examples of mega menus in action. Many of those featured in this post are from e-commerce websites Envo Storefront is the perfect free WordPress theme designed for your WooCommerce store. Plugin integrates support for free Max Mega Menu plugin. It will automatically convert your existing menu into a mega menu. Sticky Sidebar PRO. Make your sidebar permanently visible while scrolling UberMenu vs Mega Main Menu vs QuadMenu Here an in-depth analysis of three of the best mega Divi Headers and Menu Types (Part 1) In WordPress, and especially in the Divi theme of Elegant Divi Headers and Menu Types (Part 2) In the previous post I told you about 5 type

7 Best Free WordPress Menu Plugins - WPGuidelineTop 8 Responsive WordPress Dropdown Menu Plugins - ColorlibWP Mega Menu Pro - How to Configure Portfolio, Flyout MenuWordPress Mega Menu Plugin - Max Mega Menu Tutorial | Best

Welcome to part 6 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I'm dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with Wordpress and Divi. In this tutorial, I show you How to Create Anchor Links in Divi!.. Envo Shop is the perfect free WooCommerce WordPress theme.. Envo Shop is eCommerce theme that was created to work with the popular and free WooCommerce plugin. Creating a beautiful storefront has never been easier. It is simple, minimal and elegant WooCommerce theme that can be used to build a wide range of online stores ranging from a fashion store, mobile and gadget store, furniture shop. Inner Menu Bar Bounds. The submenu is bounded to the inner menu bar. Mostly useful when centering the inner menu bar. Unbounded submenus. This is the same menu, unbounded. When set to Unbounded (by the menu bar), the submenu can extend to the width of the next non-statically positioned element in its ancestor tree Mega menus (sometimes spelled megamenus) are a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. They are an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance How To Install Custom WordPress Menu. If you want an easier and beginner-friendly approach, you can use a plugin to completely change the design of your menu. There are free plugins like Groovy Menu and Max Mega Menu that allows you to setup a custom menu in WordPress with a few clicks