Insert Images in Mega Menu

15 posts from 3 voices

• Started 3 months ago by ryanchris
• Latest reply from Devin
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   ryanchris
   Member

   Hi there. I am trying to insert images and text into my mega menus - take a look at http://www.bulkpatchcables.com/frontpage/..

   I'd like to keep the text with a small photo above the text in the mega menus.

   I have this source code from reading a previous post
   <a href="http://www.yoursite.com"><img src="http://www.yoursite.com/yourimage.jpg" /></a>

   I am not a coder and not sure where the data for the photo I want to add is located. I have several photos in my library...

   Also - I am assuming that where it says yoursite.com I insert my URL's.....but where do I find the info for the image src?

   Thanks!

   Ryan

   Posted 3 months ago #
2. 

   ryanchris
   Member

   html code did not show up in the previous post

   a href="http://www.yoursite.com" ></a

   Posted 3 months ago #
3. 

   ryanchris
   Member

   Or in this one - either way - I found the code in the forum....just not sure how to apply it correctly....

   Posted 3 months ago #
4. 

   Devin
   Moderator

   Hi Ryan,

   The image source is the location on the internet where the image is located. You can use an absolute url like this:
   

   <a href="http://www.bulkpatchcables.com"><img src="http://www.bulkpatchcables.com/wp-content/uploads/2011/10/Patch-Cable-red.jpg"></a>

   Regards,

   Devin

   Posted 3 months ago #
5. 

   ryanchris
   Member

   Where did you get the source for that photo? I have a bunch of pictures in the library files. Can I use those - what would the source be for that? Sorry - I'll get it just new to it.

   Posted 3 months ago #
6. 

   ryanchris
   Member

   I see that the image URL came from right clicking and copying the URL. I guess what I am asking is what if I want to use images that are in "My Photos" or in the library that are not already placed in the site somewhere - as was the example you provided? Thanks in advance!

   Posted 3 months ago #
7. 

   Devin
   Moderator

   You just need the url for the image. Where you have them stored, in any folder on your domain or another domain.

   So if you are uploading files to your host via FTP you just need to use the url's for those files, wherever you have uploaded them.

   If you are not already using and FTP program and you were thinking about files located on your computer, you need to first upload those to either wordpress or your host (again via ftp with your host).

   In wordpress, you can upload photos from the Media section of the wordpress admin. When you upload them, you can then select them and copy the URL for where they get stored.

   Posted 3 months ago #
8. 

   ryanchris
   Member

   Sorry guys - was way over thinking that one! Last question on this - how do I add text underneath the picture (or over, or thru - whichever would be fine) to label the picture - according to the page that it will link to....

   Posted 3 months ago #
9. 

   Devin
   Moderator

   You can either add it just under that code with a paragraph tag or probably just plain text. So:
   

   <a href="http://www.bulkpatchcables.com"><img src="http://www.bulkpatchcables.com/wp-content/uploads/2011/10/Patch-Cable-red.jpg" /></a>
   <p>Buy these things</p>

   Regards,

   Devin

   Posted 3 months ago #
10. 

    ryanchris
    Member

    That worked great and things are coming along nicely. Is there a trick to getting the images that I have set up in the mega menu drop downs to be centered over the text?

    Check out http://www.bulkpatchcables.com/ and hover over menu item Cat5e Patch Cables....

    Thanks! You guys have been amazing - seriously.

    Posted 3 months ago #
11. 

    Dude
    Dude

    You can center the headline text with following css code (add it to css/custom.css):

    #top .main_menu .avia_mega h1, #top .main_menu .avia_mega h2, #top .main_menu .avia_mega h3, #top .main_menu .avia_mega h4, #top .main_menu .avia_mega h5, #top .main_menu .avia_mega h6{
    text-align: center;
    }

    Posted 3 months ago #
12. 

    ryanchris
    Member

    I'm learning how to add code....it looks like the CSS/Custom CSS is in the abundance zip folder that came with the theme. I'm assuming that is where I add the code - it opens in notepad - how do I add the code and then get that to upload to the actual theme?
    Thanks again - newby here....

    Posted 3 months ago #
13. 

    Devin
    Moderator

    Hi Ryan,

    If you are adding css to the Quick CSS field in the Styling tab, you just add it to that field and save.

    For the custom.css file, you need to connect to your host via FTP and then navigate to the css folder in the theme files. Inside that will be the custom.css file where you can add in the css. You will probably need to download the file, add css, then re-upload it to the same location and overwriting the file on the server.

    Regards,

    Devin

    Posted 3 months ago #
14. 

    ryanchris
    Member

    Cannot tell you how much I just learned. Thank you Devin for haning in there with me!

    Posted 3 months ago #
15. 

    Devin
    Moderator

    Glad we could help :)

    Let us know if you have any other questions or issues.

    Regards,

    Devin

    Posted 3 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.