Highlighted

Need responsive menu for old site [Was: I would like to]

Participant ,
Sep 22, 2020

Copy link to clipboard

Copied

Can someone help me improve my coding on this site? The index is https://www.deercrossingtreestands.com.

I would like to add the feature for a menu icon (3 horizontal bars inside a button) for mobile device viewing. I may not be describing this clearly. Some sites, instead of the full nav bar being shown tiny on a cell phone, they make a menu icon that you open to see the display in a bigger format...

 

Just not sure how to add that to an exsiting site. 

 

Any help would be appreciated.

MaryAnn

 

[Topic edited by moderator for clarity.]

TOPICS
Bootstrap, Code, How to

Views

92

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need responsive menu for old site [Was: I would like to]

Participant ,
Sep 22, 2020

Copy link to clipboard

Copied

Can someone help me improve my coding on this site? The index is https://www.deercrossingtreestands.com.

I would like to add the feature for a menu icon (3 horizontal bars inside a button) for mobile device viewing. I may not be describing this clearly. Some sites, instead of the full nav bar being shown tiny on a cell phone, they make a menu icon that you open to see the display in a bigger format...

 

Just not sure how to add that to an exsiting site. 

 

Any help would be appreciated.

MaryAnn

 

[Topic edited by moderator for clarity.]

TOPICS
Bootstrap, Code, How to

Views

93

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 22, 2020 1
Adobe Community Professional ,
Sep 22, 2020

Copy link to clipboard

Copied

What you are asking for makes complete sense.  With that said, moving from a site like yours to something more modern with mobile support is a bit of an undertaking especially when you figure in the potential for e-commerce.  It would be much more of an effort than simply adding a menu that is responsive on mobile as the rest of the layout would need to be updated to help with SEO.

 

Personally if I were in your shoes, e-commerce aside, I would consider hiring an agency to come in and help get you a new template that could make it easier to maintain your site. Get something a bit more modern and mobile friendly and possibly even get a content management system (CMS) on the backend.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2020 0
Participant ,
Sep 22, 2020

Copy link to clipboard

Copied

Thanks. I am sorry to learn there is no easy fix...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2020 0
Adobe Community Professional ,
Sep 22, 2020

Copy link to clipboard

Copied

As Nancy shared, what you are looking for is simply a hamburger menu.  And while that may be relatively easy to implement via the frameworks like Bootstrap shared, my point on this is that simply putting a hamburger menu on your site won't make it mobile friendly.  It would be like having a sports car and updating the paint when you want it to perform better.

 

In the case of e-commerce, you could consider an ecommerce platform to help simplify the transition and use one of their templates.  For instance, both Wix and Shopify offer e-commerce platforms with templates that you can customize to your liking.  They would take a cut of the sales because they are providing the PCI-compliant payment gateway that was eluded to and is a requirement of any e-commerce store.  Adobe also has an ecommerce platform, Magento, but I wouldn't recommend it based on your site because there starting price is fairly steep and geared towards larger businesses.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2020 0
Adobe Community Professional ,
Sep 22, 2020

Copy link to clipboard

Copied

It's called a responsive hamburger menu denoted by the 3 horizontal lines in the icon.  Making a mobile-friendly site is a big undertaking but it's not impossible in the right hands.

 

Bootstrap is a mobile-friendly, responsive framework that is readily supported by Dreamweaver CC.

https://www.w3schools.com/bootstrap4/

 

The collapsing navbar is built-in to Bootstrap.

https://www.w3schools.com/bootstrap4/

 

E-commerce is a separate matter for which you really need a (payment card industry) PCI compliant shopping cart.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2020 1
Participant ,
Sep 23, 2020

Copy link to clipboard

Copied

Thanks Nancy, I will have a go at it!

 

Best,

MaryAnn

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 1