http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header Support Forum - Topic: add different icons above main menu titles in header en-US Fri, 24 May 2013 13:36:14 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-77796 Fri, 28 Sep 2012 17:33:37 +0000 Mya 77796@http://www.kriesi.at/support/ <p>If you need further assistance let us know.</p> <p>Closing post.</p> <p>Regards,<br /> Mya </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-77795 Fri, 28 Sep 2012 17:26:04 +0000 webWahine 77795@http://www.kriesi.at/support/ <p>ok, so i think i have it! it still wasn't quite working so i added in some !important to force it</p> <p>here is my code from custom.css, in case someone else wants to do this; thanks so much, ismael &amp; devin :)</p> <p>/* home */<br /> #menu-item-774 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconHome.png') !important;<br /> background-position-x: 32px !important;<br /> background-position-y: -40px;<br /> background-repeat:no-repeat !important;<br /> height: 40px;<br /> display: block;<br /> }</p> <p>/* about */<br /> #menu-item-775 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconAbout.png');<br /> background-position-x: 35px !important;<br /> background-repeat:no-repeat;<br /> height: 40px;<br /> display: block; }</p> <p>/* application */<br /> #menu-item-800 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconApplication.png');<br /> background-repeat:no-repeat;<br /> background-position-x: 51px !important;<br /> height: 40px;<br /> display: block; }</p> <p>/* community */<br /> #menu-item-799 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconCommunity.png');<br /> background-repeat:no-repeat;<br /> background-position-x: 101px !important;<br /> height: 40px;<br /> display: block; }</p> <p>/* news */<br /> #menu-item-323 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconNews.png');<br /> background-repeat:no-repeat;<br /> background-position-x: 32px !important;<br /> height: 40px;<br /> display: block; }</p> <p>/* contact */<br /> #menu-item-346 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconContact.png');<br /> background-repeat:no-repeat;<br /> background-position-x: 42px !important;<br /> height: 40px;<br /> display: block; } */ </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-77755 Fri, 28 Sep 2012 10:33:00 +0000 Ismael 77755@http://www.kriesi.at/support/ <p>Hi,</p> <p>It is because of this code background-position: center;. Try to remove that and edit the background position x and y axis.</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-77702 Fri, 28 Sep 2012 02:03:28 +0000 webWahine 77702@http://www.kriesi.at/support/ <p>me again</p> <p>i added in all of the icons and it seems that they seem to space out accordingly, with the exception of the first one, which does not seem to move on the x axis if i change it</p> <p>thanks so much! </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-77701 Fri, 28 Sep 2012 01:45:45 +0000 webWahine 77701@http://www.kriesi.at/support/ <p>hi you 2</p> <p>so i finally got back to working on this site and have tried to use the code you gave me to get it right but something is not quite there yet, sorry</p> <p>i am trying to center a single icon over each nav element because it looked fine in (on my mac) chrome, but not in firefox or safari, so there needs to be 6 unique icons over the 6 nav elements</p> <p>i have modified custom.css as follows:</p> <p>/* home */<br /> #menu-item-774 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconHome.png');<br /> background-position-x: -300px;<br /> background-position-y: -40px;<br /> background-position:center;<br /> background-repeat:no-repeat;<br /> height: 40px;<br /> display: block;<br /> }</p> <p>/* about */<br /> #menu-item-775 {<br /> background: url('http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/iconAbout.png');<br /> background-position-x: -700px;<br /> background-position-y: -40px;<br /> background-position:center;<br /> background-repeat:no-repeat;<br /> height: 40px;<br /> display: block; } </p> <p>what is happening, though, is even if i change my x value for item 774 it doesn't seem to move - once i can get that to work it seems like the next one will align properly</p> <p>sorry to be a pest, but please help :) thanks again, jodi </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-75978 Fri, 14 Sep 2012 17:40:37 +0000 Ismael 75978@http://www.kriesi.at/support/ <p>Hi,</p> <p>I'm confident Devin's code will work. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-75824 Thu, 13 Sep 2012 22:14:57 +0000 webWahine 75824@http://www.kriesi.at/support/ <p>thanks so much, devin - as you say, a bit of a hack but if can get them aligned nicely it will be worth the time! i'll let you know if i have any other questions after i try my hand at a couple</p> <p>thanks, jodi </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-75795 Thu, 13 Sep 2012 18:16:07 +0000 Devin 75795@http://www.kriesi.at/support/ <p>Hi Jodi,</p> <p>This is a bit of a hack and you will definitely need to massage the values a bit but this will get you what you are looking for on a basic level. You'll need to use the model for the first menu item to finish up the rest. You can inspect each menu item to get its ID and use that ID to target it specifically with css.</p> <p>Note, I've used background-position and the original image to find the specific icon and display it, so you can just change the x coordinates and that will give you each icon without having to use multiple images.<br /> <pre><code>.main_menu { top: 58%; line-height: 85px; } #menu-item-537 { background: url(&#39;http://edgemontseniorliving.com/wp-content/themes/coherence/images/icons/icon-header.png&#39;); background-position-x: -299px; background-position-y: -29px; height: 63px; display: block; }</code></pre> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/add-different-icons-above-main-menu-titles-in-header#post-75455 Tue, 11 Sep 2012 19:15:44 +0000 webWahine 75455@http://www.kriesi.at/support/ <p>hello</p> <p>i have my test site here:</p> <p><a href="http://edgemontseniorliving.com/" rel="nofollow">http://edgemontseniorliving.com/</a></p> <p>currently password protected, so access is:</p> <p>esl1234</p> <p>you will see that i have placed some dummy icons above each menu title, but this is a bit of a hack because it's a header background image</p> <p>it works ok but if i look in different browsers it's no longer centered above each title, so what would be ideal is to have each title have it's own unique icon centered above, if possible?</p> <p>for my hack, i added this to custom.css</p> <p>/* background image icons in header */<br /> #header .container {<br /> background: url('../images/icons/icon-header.png') !important;<br /> } </p> <p>this member seems to have done something close to what i want, but i want each icon to be unique</p> <p><a href="http://cloud9spa.com/newsite/" rel="nofollow">http://cloud9spa.com/newsite/</a></p> <p>not sure how this would work; please advise</p> <p>thank you :) jodi </p>