Community Forums › Forums › Archived Forums › Design Tips and Tricks › CSS tweak needed for image in custom menu header widget
- This topic has 6 replies, 2 voices, and was last updated 10 years, 11 months ago by Anita.
-
AuthorPosts
-
May 17, 2013 at 7:07 pm #41454zmelMember
Adding images to a custom menu in header widget area, using a great tutorial suggested on this forum at http://wpmu.org/wordpress-menu-images/ but I cannot get the entire image to show, nor can I get the text to disappear using opacity. Any suggestions for getting me to the finish line?
http://tinyurl.com/waterdev130515May 18, 2013 at 9:15 am #41510AnitaKeymasterDo you have words attached to those images just like they have in there tutorial. This code is basically saying the width should be 70px and your images along are 54px wide.
#access .menu-bg1 a, #access .menu-bg1 a:hover, #access .menu-bg1 a:focus, #access .menu-bg2 a, #access .menu-bg2 a:hover, #access .menu-bg2 a:focus, #access .menu-bg3 a, #access .menu-bg3 a:hover, #access .menu-bg3 a:focus, #access .menu-bg4 a, #access .menu-bg4 a:hover, #access .menu-bg4 a:focus, #access .menu-bg5 a, #access .menu-bg5 a:hover, #access .menu-bg5 a:focus { background-repeat:no-repeat; background-position:0.5em 0.5em; color:#555; padding:10px 0 0 60px; width:70px; }
How many items do you have up there?
Love coffee, chocolate and my Bella!
May 18, 2013 at 11:04 am #41514zmelMemberThank you for your reply. Two images in this particular custom nav; there is text behind each one in the custom menu ("CITY" and "W".) No matter what I do to the code, I can't seem to show all the image. Here is the CSS with the tutorial code back in:
#nav_menu-7 { float: left; margin-left:260px; word-spacing:45px; height:60px; } #nav_menu-7 .menu-bg1 a, #nav_menu-7 .menu-bg1 a:hover, #nav_menu-7 .menu-bg1 a:focus, #nav_menu-7 .menu-bg2 a, #nav_menu-7 .menu-bg2 a:hover, #nav_menu-7 .menu-bg2 a:focus, { background-repeat:no-repeat; background-position:0.5em 0.5em; color:#555; padding:10px 0 0 60px; width:193px; } #nav_menu-7 .menu-bg1 a, #nav_menu-7 .menu-bg1 a:hover, #nav_menu-7 .menu-bg1 a:focus { background-image:url(images/city-logo.png); } #nav_menu-7 .menu-bg2 a, #nav_menu-7 .menu-bg2 a:hover, #nav_menu-7 .menu-bg2 a:focus { background-image:url(images/watersense_logo.png); }
I want to attach a screen shot, but don't see a place to do that on this thread.
Do I not have enough width, too much padding? There is another custom menu widget below this one which makes it difficult to isolate. Very much appreciate the help!
May 18, 2013 at 1:29 pm #41524AnitaKeymasterThe width of each of those icons is 54 for a total of 108px. I would try reducing that margin and the wordspacing. Make sure the entire container is wider that 108px also.
Love coffee, chocolate and my Bella!
May 18, 2013 at 2:32 pm #41530zmelMemberThe 260px margin-left keeps the second custom nav (FAQs, etc) from popping up; I tried the 108 px, and less and more with no change. Removing the word-spacing does make the first logo show a fraction more. I also removed the background positioning in the original tutorial code with no change.
Any other suggestions for me to try? This is baffling!
May 21, 2013 at 12:23 am #41979zmelMemberThe only way I could resolve this was to just make a fast text widget using html tables. Works, but wish the custom menu option had!
May 21, 2013 at 5:21 am #42002AnitaKeymasterWell, you can create a custom menu and add the images via CSS. Go to Menus, click Screen Options at the top. Make sure the CSS Classes box is checked. Then create the two Menu Items for those images. Add a name to each (SanteFeNM to one Menu and then EPA for the other one). Then go to your style sheet - and add the Styling #SanteFeNM and one for #EPA - add the image backgrounds to those, etc., etc. Once you do that. Then drag that custom menu up there. Since you were working with the other menu code, I thought you were "married to" that one. But if you want to try this - it may work better for you.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.