CSS tweak needed for image in custom menu header widget

Community Forums Forums Design Tips and Tricks CSS tweak needed for image in custom menu header widget

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  anitac 1 year, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #41454

    zmel
    Participant
    Post count: 31

    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/waterdev130515
    #41510

    anitac
    Participant
    Post count: 6992

    Do 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.

    [css]#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;
    }[/css]

    How many items do you have up there?


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #41514

    zmel
    Participant
    Post count: 31

    Thank 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!

    #41524

    anitac
    Participant
    Post count: 6992

    The 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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #41530

    zmel
    Participant
    Post count: 31

    The 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!

    #41979

    zmel
    Participant
    Post count: 31

    The 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!

    #42002

    anitac
    Participant
    Post count: 6992

    Well, 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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.