How to add a CSS Menu to VSD

User 103173 Photo


VP of Software Development
0 posts

Looking for a way to add your new CSS menu created by CoffeeCup Menu Builder to your Visual Site Designer website!? Yes, we know that is why you are here. ;) That being said, simply follow the instructions listed in the article below and your menu will be embedded in your Visual Site Designer site in no time!

http://www.coffeecup.com/help/articles/ … -designer/
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2147626 Photo


Ambassador
2,958 posts

Thanks scott! You and your team are still the best! :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 52291 Photo


Ambassador
2 posts

Have followed your directions for adding a CSS Menu from Menu builder to Visual Site Designer. Menu is vertical with drop downs. When I have finished and then hit preview in VSD i get a list of the menu items with bullets. List is horizontal. I have done this numerous times with same results. On a whim I plublished the VSD page to my S-Drive and the menu showed up correctly. I then made a menu in the HTML editor and inserted using the instructions from progrower.coffeecup.com/cssmenu.html. This menu previewed correctly.

Was planning on buying the Menu Builder as it gives me more options in the design then the editor does.

Could you tell me if the problem I am having is due to the trial version of Menu Builder? If that is not it what could be the problem?

Thanks

User 2147626 Photo


Ambassador
2,958 posts

Trial version is the same as the registered. Just has a time limit on it.

Sounds like the problem you had was that not all the files got added to the VSD site. (Happens sometimes :P)

In order to 'preview' the site before uploading, once you have added the HTML code to the web page, you need to use the 'Edit/Add Files' option on the VSD menu to add all the files and directories to VSD. Once that is done then you will be able to preview the menu.

Hope this helps. Let us know if you have any more questions. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 52291 Photo


Ambassador
2 posts

This is a follow up to my Saturday, October 19th post. I have added a Menu Builder menu to a VSD project as described in "http://www.coffeecup.com/help/articles/ … -designer/" information sheet. It is a horizontal menu with drop downs.

Problem: When I ask for a "preview" what I get is a vertical menu with bullets. If I publish this to my S-Drive or load the index.html file into HTML Editor, the menu works as advertised. Also if I do the menu in HTML Editor then load it into the VSD it previews perfectly. I would use the HTML Editor Menu but does not give me the same visual control.

Apparently I am not placing all the files over to the correct location, but for the life of me I have copied files into every conceivable location. I have used the add files menu. I have read the forum solutions. I have also created numerous test menus and VSD pages but no luck. Am I asking VSD to do something it can't do?

I am sure it is a simple thing I am missing, but it is becoming very frustrating.

Thanks
User 2147626 Photo


Ambassador
2,958 posts

Am I asking VSD to do something it can't do?

No.
Apparently I am not placing all the files over to the correct location

This is true. If your menu is showing up as text with bullets, then you did not get all the files uploaded to the correct directory. It's not hard if you take a deep breath and go slowly at first. I know it can get frustrating but the program uses subdirectories and it is important to get everything just right. There really should be only 1 file ( yourmenuname.html ) and one directory (yourmenuname). Both the directory and the html file will be in a directory called yourformname_exported, after you export the menu. Do not upload the _exported folder, just the files and directory contained within it.
When I ask for a "preview" what I get is a vertical menu with bullets.

I missed this. This is what you will get in a 'preview' in VSD if you have not added the files and folders using the 'Edit/Add Files' option. If you go this route you need to make sure to add ALL the files and folders contained in the _exported folder. It will work if you get them all. Problem doing it that way is that every time you change your menu you will have to delete and re-add all the files. I find it easier to just FTP the files to my server then view the menu live after I publish my web site.

I'm going to be busy for a while. If you still need more help, publish your site to a test directory and post a link to it here so folks can see what you have. Someone will be able to help you out I'm sure.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 239547 Photo


Registered User
28 posts

I am trying to add a non-menu builder menu to a site and the text on the page overwrites the drop down menu. I tried the suggestions above but they seem specific to menu builder. In the styles.css file is does have "#cssmenu {
z-index: 999;" which I thought would put the menu on top of everything else. What am I missing?

http://hawleygolf.coffeecup.com
User 2147626 Photo


Ambassador
2,958 posts

Hey Mark. I do this all the time. If you look at the menu on the site in my signature you'll see that the drop downs cover over other objects. It is the z-index that makes it so.

You put the code ( I'll assume ) in an HTML box in VSD. Just right-click the box and select 'arrange' then 'bring to front'. That's it. Save your site. Publish. Should work like a champ.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 239547 Photo


Registered User
28 posts

Thanks Gunsmoke. I had already done that and for some reason it still didn't work. That made me think of another idea though. I deleted the html block and then re-added it and now it seems to be working.
User 2147626 Photo


Ambassador
2,958 posts

Glad it's working for ya! Let us know if you need anything more. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.