[resolved] Adding Image to Smallbiz Menu Bar (11 posts)

  1. Mrs Chippy
    Posted 3 years ago #

    Anyone know how to add an image to the menu bar in the SmallBiz theme?

    There's a tutorial out there from eileenlonergan.com but I can't make it work. I've uploaded a 900x30px png image to WordPress and changed the relevant line in the Header PHP, but no joy.

    Any ideas?

  2. Flash Buddy
    Posted 3 years ago #

    Send a link to your site.

  3. Mrs Chippy
    Posted 3 years ago #


    Site is http://www.smartgreen.org.uk

    Any thoughts most welcome!

  4. Flash Buddy
    Posted 3 years ago #

    Image in the header: Use a jpg properly sized. Yours is 1.92MB! Here is the same image, properly sized and saved as a jpg at a measly 145KB.

    I'm having trouble wrapping my head around what you are trying to do. Are you:

    1.) Adding an icon image to menu items?
    2.) Adding a background image behind the links?
    3.) Dropping down the menu bar on top of the header image to align in the differentiated space? Someting like this >>

    I like the site :)

  5. Mrs Chippy
    Posted 3 years ago #

    Nice work with the image!

    It's #2 above that I'm trying to do. I want my menu bar to grade from white to pale grey vertically - something like this: http://www.toshiba.eu

    I'm rubbish with code so thought I'd juat swap the flat white colour for an image. Any other (easier!) options warmly welcome.

    Thanks again.

  6. Flash Buddy
    Posted 3 years ago #

    Ahhh, easy peasy. What is needed a background image to tile horizontally the width of your menu bar. I recreated their gradient with Photoshop and uploaded it, then used firebug to see what it would look like on your site (view)

    You can download my image or create your own. Here is the code for your css.

    #access .menu-header, div.menu {
        background: url("images/smart-green-top-menu-bg.jpg") repeat-x scroll 0 0 transparent;
        font-weight: bold;
  7. Mrs Chippy
    Posted 3 years ago #

    Have a look at it now - perfect!

    Took about 10 seconds to do it and I'd been messing about with it for days.

    Many thanks Mr Flash!

  8. vzb478
    Posted 2 years ago #

    Hi Flashbuddy - Dont suppose you could help me too?

    I'm also looking to update my Smallbiz site with a header graphic.. I followed your instructions above which allowed me to update ONLY the menu portion of the header graphic.. I want the whole header graphic updated with new image background (ie the bit with "Bray Holiday Apartment" etc).

    See site: http://www.brayapartment.com


  9. Flash Buddy
    Posted 2 years ago #

    You have a choice of two methods. Create a div and put your image in it, either as a background image or a normal image contained in the div. Assign a postion and z-index. Put that in your header div.

    <div style="position: relative; z-index: 10;><img src=""></div>
    <div id="niftyImage" style="background:url(pathtoimage.png) no-repeat 0 0 transparent; position: relative; z-index: 10;></div>

    Move it where you want it with css.

    Method two is to grab the header image and edit it in Photoshop or something like it. See my version: https://skydrive.live.com/redir?resid=6F4BBC1BF99B2843!142

  10. vzb478
    Posted 2 years ago #

    Thanks Flashbuddy - Second option worked for me, dont know why I didn't think of that myself!


  11. Flash Buddy
    Posted 2 years ago #

    Geeze, will ya resize that background image to fill the browser space?!

    Google jQuery Background Stretcher.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.