{"id":26086,"date":"2021-06-26T17:00:45","date_gmt":"2021-06-26T15:00:45","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26086"},"modified":"2021-06-23T12:33:32","modified_gmt":"2021-06-23T10:33:32","slug":"how-to-style-wordpress-navigation-menus","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-style-wordpress-navigation-menus\/","title":{"rendered":"How to Style WordPress Navigation Menus"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]A website navigation system is one of the most important features of every website, regardless of the platform it was built on. Navigation menus, in particular, are a key component of that system and one that has the biggest impact on visitors. So, making sure to style your WordPress navigation menus can be very beneficial for your site.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In short, navigation menus represent a structure of the website\u2019s most valuable internal links. They provide a quick and efficient way for visitors to explore your content. These links could lead to your pages, posts, categories, or some other custom links of your choosing. Luckily, adding all of these is easy to accomplish in WordPress thanks to its intuitive <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-navigation-menu-in-wordpress\/\">menu creation<\/a> and overview section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, once you\u2019ve created a WordPress navigation menu, you might need to invest additional effort to style it. With proper styling and typography, navigation menus can become real attention grabbers and provide your visitors with a smooth, polished user experience. This could keep them on your site longer and reduce your bounce rate. In this article, we\u2019ll show you how to style WordPress navigation menus to make the most of this feature. If you\u2019d like to skip to any specific part of the article, just click on one of the links below:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#before-we-start\">Before we start<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#investigating-the-wordpress-navigation-menus\">Investigating the WordPress navigation menus<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-wordpress-navigation-menu\">Styling the WordPress navigation menu<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"before-we-start\"><\/a>Before we start<\/h2>\n<p>[\/vc_column_text][vc_column_text]In general, every WordPress theme has a different, theme-specific default stylization of navigation menus. While premium WordPress themes, such as all those from the <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\" target=\"_blank\" rel=\"noopener\">QodeInteractive collection<\/a> offer a way to fully customize the default menu stylization, the same can\u2019t be said for most free themes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you aren\u2019t happy with the options your theme offers for stylization then you need to find an alternative way to style the WordPress navigation menus. To help you do this, you can use a suitable <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-menu-plugins\/\">WordPress menu plugin<\/a> or create custom CSS code. In this article, we will talk about the latter. The examples we will cover require at least a basic understanding of HTML and CSS, but we will explain everything thoroughly so users of all knowledge levels can follow along.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The examples we created for this article were made using the <a href=\"https:\/\/lekker.qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Lekker theme<\/a> and are suited to its design. Therefore, <strong>you shouldn\u2019t simply copy-paste<\/strong> them as they contain theme-specific CSS selectors and CSS rules that complement the existing theme design.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Instead, you should read through the article carefully and adjust the CSS code we provided accordingly. This includes replacing the CSS selectors with equivalent ones from your theme. Also, you should consider adjusting the existing CSS rules and\/or adding new ones. <strong>After creating your CSS code, you should insert it in Appearance &gt; Customize &gt; Additional CSS<\/strong>. With that being said, let us begin.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"investigating-the-wordpress-navigation-menus\"><\/a>Investigating the WordPress navigation menus<\/h3>\n<p>[\/vc_column_text][vc_column_text]A requirement for creating any CSS code is being able to observe, i.e. inspect, the HTML structure of a given page. By doing this, you will be able to choose the appropriate CSS selector for the HTML element to which you\u2019ll be applying a specific CSS rule.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To inspect your WordPress navigation menu,<strong> right-click on one of your navigation menu items<\/strong> and <strong>select the <em>Inspect<\/em> option<\/strong> from the menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Menu Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>This will open your browser\u2019s developer tools and place you within its Elements tab, right on the HTML element you right-clicked on. The same element will be highlighted on the page so you can see its dimensions and placement. Furthermore, depending on the element and if those properties were added with CSS, you might see its border, padding, and margin values.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"574\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menu-Item-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menu-Item-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menu-Item-Inspect-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menu-Item-Inspect-768x455.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menu-Item-Inspect-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should browse through the HTML structure of your page by inspecting various elements. This will help you understand how certain parts of the navigation menu, or the header as a whole, are created using HTML and help you find the most appropriate CSS selector. Then, you could apply some CSS rules to that CSS selector in the manner shown below (pseudo-code).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">appropriate CSS selector {\r\n\/\/ Insert CSS rules here\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using classes or IDs is always a good starting point in creating the most appropriate CSS selector.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, if we wanted to target the navigation menu only, we could use the qodef-header-navigation class from the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_nav.asp\" target=\"_blank\" rel=\"noopener\">&lt;nav&gt;<\/a> element. More specifically, we could use <strong>.qodef-header-navigation<\/strong> as the CSS selector.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"574\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Menu Items Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-Elements-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-Elements-768x455.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Items-Elements-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Likewise, if we wanted to target the whole header area, we could use the qodef-page-header ID from the <a href=\"https:\/\/www.w3schools.com\/TAGs\/tag_header.asp\" target=\"_blank\" rel=\"noopener\">&lt;header&gt;<\/a> element. More specifically, we could use <strong>#qodef-page-header<\/strong> as the CSS selector.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Header.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Header\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Header.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Header-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Header-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Header-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, if we wanted to target a navigation menu item, we could choose between using the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_li.asp\" target=\"_blank\" rel=\"noopener\">&lt;li&gt;<\/a> element and its classes, or delving deeper and using the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_a.asp\" target=\"_blank\" rel=\"noopener\">&lt;a&gt;<\/a> or <a href=\"https:\/\/www.w3schools.com\/tags\/tag_span.asp\" target=\"_blank\" rel=\"noopener\">&lt;span&gt;<\/a> element within.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"574\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Item-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Menu Item Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Item-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Item-Elements-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Item-Elements-768x455.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Menu-Item-Elements-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re confused, don\u2019t worry. The difference between all these elements and areas will be clearer when we dive into the style examples we prepared for this article.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"styling-the-wordpress-navigation-menu\"><\/a>Styling the WordPress navigation menu<\/h3>\n<p>[\/vc_column_text][vc_column_text]In this section, we will share five examples you can use to style your WordPress navigation menu. As we mentioned before, none of them should be used as-is. Instead, you need to edit whichever one(s) you choose to make the CSS selectors and rules suit your existing website. With that being said, let us proceed.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Styling the navigation links<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the first example, we\u2019ll show you how to apply some simple styling properties to all your navigation links. These and CSS codes similar to them are often the first steps in properly styling the WordPress navigation menu.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can see the CSS we created for this below:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-header-navigation li a &gt; span {\r\ncolor: #9e5423;\r\nfont-size: 25px;\r\nline-height: 1.8em;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code simply specifies the color of a menu item, its font size, and line height. Below is a screenshot of the HTML structure of our page so that you can see how we created the appropriate CSS selector.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"644\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Helpers.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Helpers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Helpers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Helpers-300x199.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Helpers-768x510.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-Helpers-620x412.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After inserting that code, we got the following result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Styling-Navigation-Items-Result.jpg\" class=\"attachment-full size-full\" alt=\"Styling Navigation Items Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Styling-Navigation-Items-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Styling-Navigation-Items-Result-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Styling-Navigation-Items-Result-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Styling-Navigation-Items-Result-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should know that, due to how menus and submenus are coded, a CSS selector similar to the one above will affect all menu items, both in the first level menu and in all other sub-level menus. If you want to apply different stylizations for menu items based on their depth (level) within the navigation menu, then you will need to create separate CSS code for each with uniquely chosen CSS selectors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Making the navigation menu transparent<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A common feature present in various WordPress websites is to seamlessly blend the navigation menu with the rest of the page. This is often referred to as having a transparent navigation menu or a transparent header. It is achieved quite easily, with a CSS code similar to the one below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#qodef-page-header {\r\nbackground-color: transparent;\r\n}\r\n#qodef-page-outer {\r\nmargin-top: -110px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using the first line of code we made the background color of our header transparent. But, using only that one line of code isn\u2019t enough. We also need to push the HTML content that is below the header upward. Otherwise, the header will take on the white color set for the background by default, because it\u2019s added under the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_body.asp\" target=\"_blank\" rel=\"noopener\">&lt;body&gt;<\/a> tag of the page. Its presence will make our first line of code useless.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, we have to push the content underneath the header by adding a negative margin to it. For this, we picked the HTML element with the ID <strong>qodef-page-outer<\/strong>. We did this because the other element shown on the screenshot below (seen in the HTML structure of the page) is the mobile header. Its ID is <strong>qodef-page-mobile-header<\/strong> and, because it\u2019s the mobile header, it will be hidden on all larger screens.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Header and Outer Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the negative margin value, you should set the same amount that you have for the header height to make them overlap perfectly. In our case, the header height was 110px, so we needed to set the corresponding margin to -110px. As such, <strong>when using this CSS, you need to replace both the CSS selectors and the negative margin amount, so that it matches the header height on your end.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, after inserting the CSS code shown above, we got the following result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"473\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Transparent-Menu-Result.jpg\" class=\"attachment-full size-full\" alt=\"Transparent Menu Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Transparent-Menu-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Transparent-Menu-Result-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Transparent-Menu-Result-768x375.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Transparent-Menu-Result-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Making the navigation menu sticky<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another way to style WordPress navigation menus is to make them sticky, i.e. fixed to the top of your page. This can be achieved with just a couple of lines of CSS. And it\u2019s a very useful feature since it will spare your visitors from any trouble with accessing the navigation menu, wherever they may be on the page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add this feature to your navigation menu, you would need to use CSS similar to this one:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#qodef-page-header {\r\nposition: fixed;\r\ntop: 0;\r\nleft: 0;\r\nz-index: 10000;\r\nwidth: 100%;\r\n}\r\n#qodef-page-outer {\r\nmargin-top: 110px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first three CSS rules fix the header to the top of your page, starting from the top left corner. The z-index makes it so it is above any element it overlaps, and the width (set to 100%) endures the menu will span across its whole container element, i.e. the whole page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, there is an unfortunate side effect to using the <em>position: fixed;<\/em> rule. Any HTML element that has this rule is taken out of the regular HTML page flow. Therefore, any HTML element that is right below it will take its place. Since that is the main page content, it means that the content will be pushed up, and, subsequently, be covered by the header. Even though we want to make the header area overlap the main content as visitors scroll down, this means that there will be a section at the very top of the page that is always hidden.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To prevent this from happening, we need to push the content down by giving it a positive margin. Making this example a polar opposite of the one that preceded it. We accomplished this by adding a margin-top of 110px, which is the height of our header.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, <strong>when using the code, you will need to replace that margin value with one that matches your header\u2019s height.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"589\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-2.jpg\" class=\"attachment-full size-full\" alt=\"Header and Outer Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-2-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-2-768x467.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Header-and-Outer-Inspect-2-620x377.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After inserting the CSS mentioned above, we got the following result. As you can see on the screenshot below, the code will \u201cglue\u201d the navigation menu to the top. This behavior will apply when scrolling both up and down the page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"424\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Sticky-Menu-Result.jpg\" class=\"attachment-full size-full\" alt=\"Sticky Menu Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Sticky-Menu-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Sticky-Menu-Result-300x131.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Sticky-Menu-Result-768x336.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Sticky-Menu-Result-620x271.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Styling a single navigation menu item only<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You might have a very important link in the navigation menu that you want to distinguish from the rest of the links. It might be a contact, login, or some CTA button, or anything you like, and you can style it separately from the links around it. That way, you\u2019ll help it stand out and grab attention. The best way of doing this is by <strong>adding a custom class to the specific link and then writing a suitable CSS code that targets that class<\/strong> in particular.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this,<strong> navigate to Appearance &gt; Menus <\/strong>and <strong>locate the <em>Screen Options<\/em> in the top right corner of your screen. Click on them<\/strong> to open, <strong>find the <em>CSS Classes<\/em> option<\/strong>, and <strong>tick the checkbox<\/strong> next to it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menus.jpg\" class=\"attachment-full size-full\" alt=\"Menus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menus.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menus-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menus-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Menus-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Screen-Options-CSS-Classes.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options CSS Classes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Screen-Options-CSS-Classes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Screen-Options-CSS-Classes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Screen-Options-CSS-Classes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Screen-Options-CSS-Classes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, select your menu, <strong>locate the menu item<\/strong> that you want to add a custom class to, and <strong>click to open it<\/strong>. Within the item settings,<strong> find the <em>CSS Classes<\/em> option<\/strong> and <strong>add your custom CSS class<\/strong>. In our case, we added the <strong>custom-nav-button<\/strong> class. When you\u2019re done, <strong>press the<em> Save Menu<\/em> button<\/strong> to save this change.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-CSS-Classes-to-Menu-Item.jpg\" class=\"attachment-full size-full\" alt=\"Adding CSS Classes to Menu Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-CSS-Classes-to-Menu-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-CSS-Classes-to-Menu-Item-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-CSS-Classes-to-Menu-Item-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-CSS-Classes-to-Menu-Item-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Save-Menu-Button.jpg\" class=\"attachment-full size-full\" alt=\"Save Menu Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Save-Menu-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Save-Menu-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Save-Menu-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Save-Menu-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>you need to create the appropriate CSS code for this custom class<\/strong>. Since CSS classes are written with a period (.) when used as a CSS selector, <strong>you\u2019ll need to add a period before the name of your custom class when using it as a suitable CSS selector<\/strong>. Since we added a CSS class called <em>custom-nav-button<\/em>, the CSS selector we used in the code was <em>.custom-nav-button<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To style only one link in the menu, we created the following CSS code:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.custom-nav-button span {\r\nbackground: #ff0000;\r\ncolor: #000000;\r\nborder-radius: 40px;\r\npadding: 5px 17px;\r\n-webkit-transition: color 0.3s ease-out, background 0.3s ease-out;\r\ntransition: color 0.3s ease-out, background 0.3s ease-out;\r\n}\r\n.custom-nav-button span:hover{\r\ncolor: #ffffff;\r\nbackground: #000000;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<span style=\"font-weight: 400;\">First of all, the custom class is added to the appropriate &lt;li&gt; element. Depending on what you need to achieve, you might target that exact element or some of its inner elements. After examining the HTML code, we decided to apply the styles to the &lt;li&gt; element\u2019s inner &lt;span&gt; element.<\/span>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element.jpg\" class=\"attachment-full size-full\" alt=\"Inspect New Item Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-2.jpg\" class=\"attachment-full size-full\" alt=\"Inspect New Item Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-2-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-2-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Inspect-New-Item-Element-2-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The code itself is pretty straightforward. We set a background color, text color, padding, and border radius for the link to make it stand out and look like a button. Additionally, we specified the text and background color on hover. Finally, we added a <a href=\"https:\/\/www.w3schools.com\/css\/css3_transitions.asp\" target=\"_blank\" rel=\"noopener\">transition<\/a>, to make the changes in both text and background color more smooth. The transition lasts 0.3s and its timing function is ease-out, making the transition slower at the end.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The transition is just one of many examples of how you can add a specific hover effect to an element or link, making it more visually appealing. We will show you another hover effect in the next example.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We need to mention that we disabled the default Lekker theme underline hover effect for this article. We did this to show you the effect you can create with this and the following example. And to avoid any possible confusion caused by overlapping hover effects.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, after adding our CSS, we got the result shown in the gif below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1114\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Button-hover-efekat.gif\" class=\"attachment-full size-full\" alt=\"Button Hover\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Adding a hover effect to navigation links<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Adding a hover effect or an animation to your navigation links can work wonders in attracting more visitors. Most premium themes offer <a href=\"https:\/\/qodeinteractive.com\/magazine\/functional-animation-in-ux\/\">unique animations to boost their UX<\/a>. This is also the case with QodeInteractive, which goes a step further to create <a href=\"https:\/\/qodeinteractive.com\/theme-effect\/special-hovers-wordpress-themes\" target=\"_blank\" rel=\"noopener\">themes that offer special hover effects<\/a> and <a href=\"https:\/\/qodeinteractive.com\/theme-effect\/scroll-animations-wordpress-themes\" target=\"_blank\" rel=\"noopener\">themes with special scroll animations<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, there is a way to create hover effects on your own using CSS. For the last example in this article, we\u2019ll explain how you create an underline hover effect similar to the one present in the Lekker theme. Please note, as the CSS code required to achieve this is relatively advanced, so you might need to do additional research before modifying it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code in question is shown below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-header-navigation li a &gt; span {\r\nposition: relative;\r\n}\r\n.qodef-header-navigation li a &gt; span:after { \r\ncontent: \"\";\r\nposition: absolute; \r\nleft: 0; \r\nbottom: 0px; \r\nwidth: 100%; \r\nheight: 2px;\r\nbackground: #ff0000;\r\n-webkit-transform: scaleX(0);\r\ntransform: scaleX(0); \r\n-webkit-transform-origin: center; \r\ntransform-origin: center; \r\n-webkit-transition: -webkit-transform 0.3s ease-in; \r\ntransition: -webkit-transform 0.3s ease-in; \r\ntransition: transform 0.3s ease-in; \r\ntransition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;\r\n}\r\n.qodef-header-navigation li a &gt; span:hover:after { \r\n-webkit-transform: scaleX(1); \r\ntransform: scaleX(1); \r\n-webkit-transform-origin: center; \r\ntransform-origin: center;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s break it down.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First of all, the CSS code is performed on an <a href=\"https:\/\/www.w3schools.com\/cssref\/sel_after.asp\" target=\"_blank\" rel=\"noopener\">::after<\/a> pseudo-element. We set the position of the &lt;span&gt; element to <em>relative<\/em> and the position of its ::after pseudo-element to <em>absolute<\/em>. By doing this, we ensured that the ::after pseudo-element is positioned in relation to the &lt;span&gt;, and not to some other ancestor or even the whole &lt;body&gt; tag of the HTML document.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, by using the corresponding values for the left and bottom, we placed the ::after pseudo-element directly below the &lt;span&gt; tag. Using the width, height, and background properties we made the div take up the whole width of the span element, gave it a height of 2px, and set its color to red. In short, with these properties we added a red-colored div that is placed directly below the navigation menu &lt;span&gt; element, making it seem as if the menu element is underlined.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the hover effect is created using the <a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp\" target=\"_blank\" rel=\"noopener\">transform<\/a> and <a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_transition.asp\" target=\"_blank\" rel=\"noopener\">transition<\/a> properties in conjunction. The ::after element, both in its normal and hover state, has a transform rule applied to it. In the normal state, it is the scaleX(0) rule, meaning the ::after element shrinks along the x-axis. While in the hover state, it is the scaleX(1) rule, meaning the ::after element expands to its normal width along the x-axis.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since the transform-origin property is set to center in both cases, it means the ::after element shrinks towards its center point and expands away from its center point. This explains the transform-related rules. As for the transition-related ones, they simply serve to smooth out the transition between expanding and shrinking. The duration of the transition is 0.3s and, because its timing function is ease-in, the transition starts slowly and then ramps up.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<span style=\"font-weight: 400;\">The hover effect we chose to showcase makes the navigation links underlined when hovered over. That \u201cline\u201d expands when someone hovers over a menu item and contracts as they move away from it. Both movements originate from a central point below the link text. Now that we covered how the effect is made, you can observe the result, shown in the gif below.<\/span>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1148\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Hover-efekat.gif\" class=\"attachment-full size-full\" alt=\"Hover\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this article, we have covered five ways to style WordPress navigation menus using CSS code. These include adding simple styles and or doing something more advanced like creating hover effects. We also covered how to style all your navigation menu items at once and how to style a specific one. Additionally, we showed you how to enable a transparent menu and a sticky one. Whichever example you choose to follow, please remember to edit the code in the article to match the HTML structure of your website and its existing design.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Follow our step-by-step guide and learn how to style WordPress navigation menus and ensure your site is easy to navigate and use for all-comers. <\/p>\n","protected":false},"author":11229,"featured_media":26487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,116,13],"class_list":["post-26086","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-ui-css","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26086"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26086\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26487"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}