If you need support from Yola please contact us via support@yola.com or make use of our live chat service! We are working on a new approach to community-based support and during this transition period we are not adding any new threads to this forum. Many thanks to everyone who has participated over the years and we look forward to unveiling a new peer-to-peer support system soon!

Implementing custom menus into my site

I have been getting help fro the great people on the Yola support team regarding implementing custom menus into my site. I would love to hear from people in the community who have actually done this on their sites.

Do I have to use the code that is on the Yola code site or can I use code from a menu generator? If so, how exactly (step by step please) would I do this. I see so many sites with some nice looking and functional menus that I would love to have on my site as well.

Its really just a case of finding the menu you like and adding it your site.

I see on your home page that you have 2 clear menu sections, computer and music - something like a drop down menu would work well with those links, computer and music would be in the main nav and then all the other links would appear on mouse over.

Using a free account you would just add the java and css files to your page (at the top) and then add the menu code where you wanted the menu to appear.

You have to decide which style you like.

I have a custom menu http://hexham.info but its just 1 level as thats what i need for my site - you might be better off with a drop down.

I like purecssmenu.com It's a generator. You pick the template, change the parameters and fill in the links you want. It will generate the code to download. Upload the images (if any) and change the code so that it points correctly to the image (add "resources"). Then copy and paste the code into an HTML widget. See mine on http://www.tejutsukaimartialarts.com

Hi Diane
I am very interested in creating some form of drop-down menu like yours. In fact I have created one using http://www.cssmenumaker.com . I think I have done everything right, but when I paste the code into the HTML widget, it just appears as text on the webpage. You can check it out here http://petesprinting.yolasite.com/t-s... . You will have to scroll to the bottom of the page. (I have hidden it there from potential visitors). The only thing I can think of is that the file created was .css and not .css.html like yours. Can you have a look at it and see if I'm doing anything daft?
Thanks in advance...
Pete

I tried some more code that they gave me, but didn't think it would work because they said I needed to upload the original "Menu" folder to the root directory, which Yola said I could not do. However it seems to be working anyway. I feel like an expert now!

Diane, when you say upload the images do I upload to the Yola File manager or even on my hosting server? Can you just briefly step by step what exactly I have to do (where everything goes?) Much appreciated!!!!

I have been there but I am not sure what to do with the code once I download it. I just need some specific guidance on how to build and implement the menu. If anyone is able to make a brief screencast for me that I can watch, that would help me a great deal.

If you want to try purecssmenu.com here are some more instructions. You will have to figure out purecssmenu yourself because it would be too lengthy here but it is pretty self-explanatory. It will down load a file like this to your computer:

Open the file and you will see two items like this:

Upload all the files (if any) in the Images file to your YOLA file manager.

Next open the css.html file in a text editor like Notepad or whatever you use. You will see a long page of code like this:

Find all the instances of references to the images and change them to "resources/whatever the image name is" They will look like this:

Copy all the code then go back to your yola site builder. Drag and drop an html widget from the right side to where ever you want the menu to appear on your page. The HTML editor will open. Paste your code here and click okay. Save the page and preview it to see how it looks.

OK. I created a folder in my File Manager called menupics. The five images are in that folder. Now back to the code in the text editor. I gather that all I have to do is type in the path back to the images I uploaded into the File Manger and replace link after where it says url, background-image:url(./images/arr_white_1.gif) for all the references to the graphics in the code, copy and paste the code into a HTML widget back in my Yola site.

If I have the code in the folder in my File manager folder as described above, what is the correct path to insert after where it says URL?

Thanks!!! You have been a big help!!!

Randy

I'm not sure where exactly to insert all five .gif files (that are now up in my file manager) in the right place in the css file. I only found two instances of background-image:url and I have five .gif files.