{"id":7539,"date":"2019-07-07T01:15:28","date_gmt":"2019-07-07T01:15:28","guid":{"rendered":"https:\/\/wpinitiate.com\/index.php\/2019\/07\/07\/thesis-navigation-menu-plugin-part-12\/"},"modified":"2019-07-07T01:15:28","modified_gmt":"2019-07-07T01:15:28","slug":"thesis-navigation-menu-plugin-part-12","status":"publish","type":"post","link":"https:\/\/wpinitiate.com\/index.php\/2019\/07\/07\/thesis-navigation-menu-plugin-part-12\/","title":{"rendered":"Thesis Navigation Menu Plugin Part 12"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"580\" height=\"380\" src=\"https:\/\/player.vimeo.com\/video\/35122266?color=00adef\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><br \/>Add Different Icons to Each Menu Item<br \/>\n<a href=\"http:\/\/thesistoolbox.com\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/thesistoolbox.com<\/a><br \/>\nVideo Transcript<br \/>\nNow I\u2019m going to show you how to use this plugin to style the Thesis navigation menu so that it has a you know, a little icon that sits before the text. And in fact, that icon is going to change color or change state as a link state changes. And we\u2019re also going to use an image sprite to accomplish this rather than using a whole bunch of different images. So that\u2019s the next thing that we\u2019re going to do here. And in order for us to do that, the first thing we want to look at is our image itself.<\/p>\n<p>So this is our image that we\u2019re going to use as our sprite. It has 4 different icons, the light bulb, the beaker, the planet, and the spaceship. And then it\u2019s got 3 different states for each of those. It\u2019s got the solid bright color. It\u2019s got the semi-transparent color and it\u2019s got the gray color. And the one I\u2019m going to do is use this color for the current state, this for hover, and this for link so that the default color will be this gray color. And what we\u2019ll be doing is we\u2019ll be telling each menu item which piece of this image to use given its specific condition, using the position property inside of that plugin. And we will be setting the position from the top left hand corner. And so by specifying its height and its width, now each one of these icons sits in a rectangle that is 50 pixels by 50 pixels. So each of these 4, that\u2019s 200 pixels and then 400 pixels and then 600 pixels. So this image is 600 pixels tall and 50 pixels wide. So we\u2019ve got that little grid working here and it\u2019s that little grid that we\u2019re going to use for determining the position of the sprite in each of our menu items.<\/p>\n<p>So the first thing we need to do is upload this menu and we\u2019re going to come in here and go to the dashboard. Okay and then from the dashboard, we\u2019ll go to the nav menu. Then this nav menu\u2019s already sitting in the location here inside the Thesis Simple Header Widgets plugin. So when using this plugin with the Header Widgets plugin, of course, we\u2019re going to set it so that it doesn\u2019t display and then we\u2019ll use the Header Widgets plugin to display it. So the position is set not to display, the menu visibility is set for everyone, the alignment is aligning the menu to the right, and at the moment, we\u2019re not going to turn our layout guides on. <\/p>\n<p>So in terms of our overall menu customization options, we are going to set overall menu margin in order to move this thing down. But I think otherwise, we\u2019re going to not set anything else for our overall menu styles. And then for our typical menu styles, we will customize the typical item margin, typical item padding, typical item background. And then we are going to customize each menu item separately. The other thing I want to is just change up my text a little bit or we\u2019re not going to do anything with submenus but change up my text. And so I\u2019m going to use normal spacing for the text and when I remove all caps and then we\u2019re going to say save to this. Okay now that will have created this progressive refinement whereby we have a new set of choices now that we\u2019ve made these choices.<\/p>\n<p>And let\u2019s see, let\u2019s just go over here and take a look at what it looks like now. Okay, there we go. So the first thing we\u2019re going to do is go over to Design Options and get rid of the border around this thing. So we\u2019ll go to Thesis Design Options and we\u2019re going to go down to the nav menu and then we\u2019ll get rid of the border. Remembering that the first thing we do is everything we can do using the Thesis Nav menu and then we refine that using the plugin. So we got rid of that border and if we refresh it, we\u2019ll see that the border is gone. <\/p>\n<p>Okay so now what we\u2019re going to do is work on our typical menu item styles. And so the first place I think I want to give ourselves a left margin of 10 pixels. I want to separate those menu items themselves and I\u2019m going to give the overall margin, a top margin say of 100 pixels. And then while we\u2019re at it, in terms of background style, we are going to customize the background color and use the background image for each of these. Oh we haven\u2019t\u2026 and we also need to set the number of tabs we\u2019re going to do. We said we\u2019re going to customize each menu item separately. We have 4 menu items so we\u2019re going to say 4 menu tabs. And let\u2019s see, customize background color\u2026 actually, in this case, we\u2019re just going to customize background color and all of them but not use background image because this is the typical, not the menu item itself. <\/p>\n<p>Okay so now we have tab 1, tab 2, tab 3, and tab 4 styles and then we have option to set colors. And what we\u2019re going to do with the color is essentially, make these colors transparent. That\u2019s why we said customize the background color because we want to get rid of all the background colors in the typical menu items because we\u2019re not going to use any background color here. So we just make all those things transparent.<\/p>\n<p>And then what we\u2019re going to do is say to each of these tabs, we\u2019re going to customize the background. Now, in order to understand these tabs, let\u2019s go ahead and save it first. In order to understand how these tabs work, WordPress or Thesis automatically adds the class tab hyphen and then essentially tab number which is the position left to right in the menu. So this is tab-1, tab-2, tab-3, and tab-4. And so what we are doing here is we are doing the same thing. We\u2019re creating a style for tab-1 and that style will apply to the first menu item.<\/p>\n<p>Okay so now under our styles here, we are going to say use background image for the link background style, use background image for the hover style, use the background image and use the background image. And we have to make that choice again for all of these. You can see how many choices you would have to make if we didn\u2019t have this progressive refinement system. You would have to wade through hundreds of irrelevant choices and it would just be confusing. So what we do instead is we progressively add choices as you make decisions. <\/p>\n<p>Okay so anyway, we\u2019re going to use background images on all of those states for each of those tabs. And now let\u2019s go ahead and upload that image. We haven\u2019t done that yet so we\u2019re going to say add new. I\u2019m just going to add this to our media library. Actually, we\u2019re going to see our new drag and drop feature here in action because what I\u2019m going to do is open this up, websites, BYOB Website, tutorial sites, and\u2026 I don\u2019t know, Thesis BYOB tutorial graphics. And I believe I\u2019m working with nav3.png. So all I do is just drag that here. Drag it, drop it, and now it\u2019s been uploaded. <\/p>\n<p>Okay and so let\u2019s see, it says it\u2019s uploaded so\u2026 okay, there it is. Now it is actually uploaded. So here\u2019s our image here and so we\u2019ll go ahead and copy that URL. Come back over to our plugin and then we\u2019re going to just paste that URL everywhere. Let\u2019s see, under tab 1 styles, we\u2019ve got our link background image with no repeat and we\u2019ll leave it at top left for the moment. And we\u2019ll have our hover background image with no repeat and our current background image with no repeat and our current parent with no repeat. And then we\u2019ll do the same thing with each of these because we\u2019re not going to have these things repeat. It\u2019s the icons that are only going to show up once.<\/p>\n<p>Now you may wonder why we have to say this so many times but what I want you to have is some maximum flexibility. That is the ability to do different menu items in different states differently. So that\u2019s what you have here. Once you\u2019ve decided you want to style each tab differently, that\u2019s what\u2019s you\u2019re going to have, a full set of choices for each tab. No repeat, current parent. <\/p>\n<p>Okay so we\u2019ve got that in there with the no repeat and if we hit save and hit refresh, we\u2019re going to see those images show up. I think I must have messed that one up but you can see the light bulb and these ones here. Now what we need to do is add padding so that we can move the text away from the image. And of course, they\u2019re all in the same position so they don\u2019t change currently on link state yet but they will.<\/p>\n<p>So come back over here and look at our tab 1 customization options, link background state. Yeah, you can see I forgot this one, no repeat. Okay, if we hit save and refresh it\u2026<br \/><a href=\"https:\/\/1.envato.market\/coderevolution\">Check out these cool WordPress plugins!<\/a> &#8211; CodeRevolution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add Different Icons to Each Menu Item http:\/\/thesistoolbox.com Video Transcript Now I\u2019m going to show you how to use this plugin to style the Thesis navigation menu so that it has a you know, a little icon that sits before the text. And in fact, that icon is going to change color or change state [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[1330,3008,1287],"class_list":["post-7539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp","tag-and","tag-going","tag-the"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/posts\/7539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/comments?post=7539"}],"version-history":[{"count":0,"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/posts\/7539\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/media\/7540"}],"wp:attachment":[{"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/media?parent=7539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/categories?post=7539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpinitiate.com\/index.php\/wp-json\/wp\/v2\/tags?post=7539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}