Hamburger Menu for Landing Pages
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
Comments
3 comments
This is possible. I just tested it myself. Follow the directions found on W3 school's website for creating a responsive navigation top menu, and it should work for you too.
I saved each section as .html, .css and .js files. (media queries go under css) and added them as attachments.
You can save the attachments and add them to each section in Act-on's editor, or you can paste the code directly from W3 into the correct section in Act-on's editor. Either way works. Just remember the media quieries section goes after the css code, in the css section.
1. add the html file as custom content in act-on's landing page editor.
2. add the css file to the css section in act-on's landing page editor.
3. add the javascript file to the javascript section in act-on's landing page editor.
Here is a link to W3 School's page on how to do this.
How To Create a Responsive Top Navigation Menu
------------------------------
Michelle Dean
Graphic Designer
Acromag
------------------------------
-------------------------------------------
Original Message:
Sent: 01-22-2019 10:28
From: Sarah Daily
Subject: Hamburger Menu for Landing Pages
Is there a way to create a hamburger menu for anchor links on a landing page when it's in tablet/mobile view?
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
I followed them, and the menu does collapse into a hamburger menu, however, when I click it, the page goes blank and doesn't respond: https://marketing.enrollment.org/acton/fs/blocks/showLandingPage/a/30029/p/p-002c/t/page/fm/0
Did I miss something?
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
-------------------------------------------
Original Message:
Sent: 01-23-2019 07:38
From: Michelle Dean
Subject: Hamburger Menu for Landing Pages
Hi Sarah,
This is possible. I just tested it myself. Follow the directions found on W3 school's website for creating a responsive navigation top menu, and it should work for you too.
I saved each section as .html, .css and .js files. (media queries go under css) and added them as attachments.
You can save the attachments and add them to each section in Act-on's editor, or you can paste the code directly from W3 into the correct section in Act-on's editor. Either way works. Just remember the media quieries section goes after the css code, in the css section.
1. add the html file as custom content in act-on's landing page editor.
2. add the css file to the css section in act-on's landing page editor.
3. add the javascript file to the javascript section in act-on's landing page editor.
Here is a link to W3 School's page on how to do this.
How To Create a Responsive Top Navigation Menu
------------------------------
Michelle Dean
Graphic Designer
Acromag
------------------------------
Original Message:
Sent: 01-22-2019 10:28
From: Sarah Daily
Subject: Hamburger Menu for Landing Pages
Is there a way to create a hamburger menu for anchor links on a landing page when it's in tablet/mobile view?
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
I apologize, I jumped the gun and assumed there were no bugs with this setup.
I don't think it's anything you did. Something isn't working right when the different code segments are added to act-on. I tested the landing page I made again and I'm starting to receive these errors: 'content corrupted error' in Firefox and a 'ERR_INVALID_REDIRECT' in Chrome. Power of elimination showed that it's probably something with the css or the media quires.
I created a codepen and the it works fine, so I believe it has to be something with Act-on's landing pages.
Here's the code pen I created. If you minimize the page and click the menu items everything works fine.
https://codepen.io/MichelleBeth/pen/aXvobQ
For now, I'd remove the hamburger menu functionality from your landing page (if it's live), until we get more information on the cause of these errors.
I'm hoping someone from Act-on can weigh in and give us some insight into why these errors are happening with their landing pages. The landing pages have sections for adding javascript, css and html, so I would expect an example responsive navigation that is made using these three elements would work.
------------------------------
Michelle Dean
Acromag
------------------------------
-------------------------------------------
Original Message:
Sent: 01-23-2019 09:39
From: Sarah Daily
Subject: Hamburger Menu for Landing Pages
Thanks for your instructions, Michelle!
I followed them, and the menu does collapse into a hamburger menu, however, when I click it, the page goes blank and doesn't respond: https://marketing.enrollment.org/acton/fs/blocks/showLandingPage/a/30029/p/p-002c/t/page/fm/0
Did I miss something?
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
Original Message:
Sent: 01-23-2019 07:38
From: Michelle Dean
Subject: Hamburger Menu for Landing Pages
Hi Sarah,
This is possible. I just tested it myself. Follow the directions found on W3 school's website for creating a responsive navigation top menu, and it should work for you too.
I saved each section as .html, .css and .js files. (media queries go under css) and added them as attachments.
You can save the attachments and add them to each section in Act-on's editor, or you can paste the code directly from W3 into the correct section in Act-on's editor. Either way works. Just remember the media quieries section goes after the css code, in the css section.
1. add the html file as custom content in act-on's landing page editor.
2. add the css file to the css section in act-on's landing page editor.
3. add the javascript file to the javascript section in act-on's landing page editor.
Here is a link to W3 School's page on how to do this.
How To Create a Responsive Top Navigation Menu
------------------------------
Michelle Dean
Graphic Designer
Acromag
Original Message:
Sent: 01-22-2019 10:28
From: Sarah Daily
Subject: Hamburger Menu for Landing Pages
Is there a way to create a hamburger menu for anchor links on a landing page when it's in tablet/mobile view?
------------------------------
Sarah Daily
Digital Marketing Manager, The Enrollment Management Association
------------------------------
Please sign in to leave a comment.