{"id":2129,"date":"2017-09-25T18:17:06","date_gmt":"2017-09-25T12:47:06","guid":{"rendered":"http:\/\/mandmwebsolutions.com\/blog\/?p=2129"},"modified":"2018-04-24T15:02:53","modified_gmt":"2018-04-24T09:32:53","slug":"how-to-style-wordpress-navigation-menu","status":"publish","type":"post","link":"http:\/\/mandmwebsolutions.com\/blog\/how-to-style-wordpress-navigation-menu\/","title":{"rendered":"How To Manually Style WordPress Navigation Menu"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/How-to-manually-style-WordPress-navigation-menu.jpg\" alt=\"How To Manually Style WordPress Navigation Menu\" width=\"765\" height=\"455\" \/><\/p>\n<p><em>Navigation menus are customizable menus in your theme that allow users to add pages, posts, categories, and URLs to the menu.<\/em> You would like to style your navigation menus to change their appearance to suit your site.<\/p>\n<p>You need to edit your WordPress theme files. If you want to change CSS without changing your theme files, you can see the steps given below on how to add custom CSS using theme customizer:<\/p>\n<h2>Here is a Complete Step by Step Tutorial Guide To Style WordPress Menu<\/h2>\n<ul class=\"innerlist\">\n<li>\n<p>1. You need to go to <strong>Themes<\/strong> &gt; <strong>Customize<\/strong> page that will open the WordPress theme customizer interface.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/navigation-menu-1.png\" alt=\"Themes &gt; Customize page\" width=\"520\" height=\"311\" \/><\/li>\n<li>\n<p>2. You will see your site\u2019s live preview along with many options on the left sidebar. Click the Additional CSS tab from the left sidebar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/navigation-menu-2.png\" alt=\"site\u2019s live preview\" width=\"520\" height=\"347\" \/><\/li>\n<li>\n<p>3. You will see a box in which you can add your custom CSS. When you add a valid CSS rule, you will see it replicated on site\u2019s live preview. After you have added and checked how custom CSS code looks on your site, click the Save &amp; Publish button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/navigation-menu-3.png\" alt=\"a box where custom CSS can get added\" width=\"520\" height=\"337\" \/><\/li>\n<\/ul>\n<p>You need to define CSS class and menu location, Your WordPress theme might already be doing that by adding the navigation menus using code similar to the one shown below:<\/p>\n<p><code>&lt;?php<br \/>\n  wp_nav_menu( array(<br \/>\n  'theme_location' =&gt; 'primary',<br \/>\n  'menu_class'     =&gt; 'primary-menu',<br \/>\n  ) );<br \/>\n?&gt;<\/code><\/p>\n<p>Through this code, WordPress knows the location where the theme displays primary menu. Using the following CSS structure as mentioned below you can do stylizing a navigation menu with CSS.<\/p>\n<p><code>.navigation{<br \/>\n  position:  relative;<br \/>\n  z-index:  1000;<br \/>\n  padding:  11px 0 0;<br \/>\n  }<br \/>\n  .nav{<br \/>\n  margin:  0;<br \/>\n  padding:  0;<br \/>\n  }<br \/>\n  .nav li{<br \/>\n  float:  left;<br \/>\n  font-size:  19px;<br \/>\n  line-height:  26px;<br \/>\n  font-weight:  700;<br \/>\n  margin:  0 38px 0 0;<br \/>\n  position:  relative;<br \/>\n  }<br \/>\n  .nav li:last-child{<br \/>\n  margin:  0;<br \/>\n  }<br \/>\n  .nav li a{<br \/>\n  color:  #1d4653;<br \/>\n  display:  block;<br \/>\n  padding:  0 0 27px;<br \/>\n  -webkit-transition:  all 0.3s ease-in-out;<br \/>\n  -moz-transition:  all 0.3s ease-in-out;<br \/>\n  -ms-transition:  all 0.3s ease-in-out;<br \/>\n  -o-transition:  all 0.3s ease-in-out;<br \/>\n  transition:  all 0.3s ease-in-out;<br \/>\n  }<br \/>\n  .nav li a:hover, .nav  li.current_page_item a{<br \/>\n  color:  #009ad1;<br \/>\n  }<br \/>\n  .nav li ul{<br \/>\n  position:  absolute;<br \/>\n  width:  220px;<br \/>\n  top:  53px;<br \/>\n  left:  0;<br \/>\n  background-color:  #FFF;<br \/>\n  border-bottom:  3px solid #009ad1;<br \/>\n  -webkit-box-shadow:  0px 4px 4px 0px rgba(0,0,0,0.20);<br \/>\n  -moz-box-shadow:  0px 4px 4px 0px rgba(0,0,0,0.20);<br \/>\n  box-shadow:  0px 4px 4px 0px rgba(0,0,0,0.20);<br \/>\n  \/*         display:  none;*\/<br \/>\n  transform:  scaleY(0);<br \/>\n  transform-origin: 0 0 0;<br \/>\n  transition: all 0.3s ease 0s;<br \/>\n  visibility: hidden;<br \/>\n  }<br \/>\n  .nav li:hover ul{<br \/>\n  transform: scale(1);<br \/>\n  visibility: visible;<br \/>\n  }<br \/>\n  .nav li ul li{<br \/>\n  float:  none;<br \/>\n  margin:  0;<br \/>\n  font-size:  16px;<br \/>\n  line-height:  22px;<br \/>\n  font-weight:  600;<br \/>\n  border-top:  1px solid #f0f5f8;<br \/>\n  }<br \/>\n  .nav li ul li a{<br \/>\n  padding:  8px 10px;<br \/>\n  color:  #009ad1;<br \/>\n  }<br \/>\n  .nav li ul li a:hover{<br \/>\n  color:  #faa126;<br \/>\n}<\/code><\/p>\n<p><em>You need to replace #header with the container class or ID used by your WordPress theme. You can completely change the appearance of your navigation menu with the help of this structure.<\/em><\/p>\n<p><em>Apart from that, some classes are automatically added by WordPress to each menu and menu item that allows you to customize your navigation menu further.<\/em><\/p>\n<p><code>&lt;div  class=\"navigation\"&gt;<br \/>\n  &lt;a  class=\"responsive\"&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;<br \/>\n  &lt;?php  wp_nav_menu( <br \/>\n  array( <br \/>\n  'theme_location'  =&gt; 'top',<br \/>\n  'container'       =&gt; '',<br \/>\n  'container_class'  =&gt; false,<br \/>\n  'menu_class'  =&gt; 'nav', <br \/>\n  'menu_id'  =&gt; 'top-menu' ,<br \/>\n  )  );  ?&gt;<br \/>\n  &lt;div  class=\"clear\"&gt;&lt;\/div&gt;<br \/>\n  &lt;\/div&gt;<\/code><\/p>\n<p>You can also add CSS classes to individual menu items from the admin area. Using this feature, you can add image icons with your menus or change colors to highlight a menu item.<br \/>\n Now, go to <strong>Appearance<\/strong> &gt; <strong>Menus<\/strong> page and click the <strong>Screen Options<\/strong> button.<br \/>\n You need to check the <strong>CSS Classes<\/strong> box under the <strong>Show advanced menu properties<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/navigation-menu-4.jpg\" alt=\"Appearance &gt; Menus page\" width=\"520\" height=\"264\" \/><\/p>\n<p>When you go to edit each individual menu item, you will see an additional field is added.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/mandmwebsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/navigation-menu-5.jpg\" alt=\"additional field\" width=\"520\" height=\"267\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A complete step by step tutorial guide for styling WordPress menu using theme customizer that suits your WordPress site.<\/p>\n","protected":false},"author":1,"featured_media":2152,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[36],"tags":[53,59,58,50,47,46,60,57,52,51,44,45,48,49,56,42,41,43,55,54],"class_list":["post-2129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-cheap-digital-marketing-agency-kolkata","tag-cheap-facebook-promotion-kolkata","tag-cheap-seo-services-kolkata","tag-digital-marketing-agencies-in-kolkata","tag-digital-marketing-agency-india","tag-digital-marketing-kolkata","tag-facebook-marketing-kolkata","tag-facebook-promotion-kolkata","tag-seo-company-in-kolkata","tag-seo-services-kolkata","tag-social-media-agency-kolkata","tag-social-media-kolkata","tag-social-media-marketing-company-in-kolkata","tag-social-media-marketing-kolkata","tag-social-media-marketing-services-in-kolkata","tag-top-digital-marketing-agencies-in-kolkata","tag-top-digital-marketing-companies-in-kolkata","tag-web-design-company-kolkata","tag-web-designer-kolkata","tag-web-development-company-kolkata"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=2129"}],"version-history":[{"count":6,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2129\/revisions"}],"predecessor-version":[{"id":2280,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2129\/revisions\/2280"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/media\/2152"}],"wp:attachment":[{"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=2129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=2129"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mandmwebsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}