Category: Web Design

Astra Theme Wordpress How To Make Mobile Nav Scrollable

Astra Theme – Mobile Navigation How To Make The Drop Down Navigation Bar Scrollable

Mobile Menu Not Scrolling on Astra Theme?

Recently, I was working on a website that had the Astra WordPress Theme along with Elementor Page Builder plugin builder.

Everything was fine until I started to work on and edit the mobile navigation.

This particular client had sub categories or a drop down sub navigation menu displaying under the SHOP main navigation item with approximately 50 categories.

Each time we would select the Shop drop down then attempt to scroll down to view more categories, the navigation would disappear on mobile.

 

Mobile Menu Disappears Astra Theme Elementor

 

We created a separate menu called “Off Canvas Menu” under Appearance –> Menus –> Create New Menu.  Then ASSIGNED this menu ONLY to the “Off Canvas” Selection at the bottom checkboxes below the menu to assign only this menu to this area.

Create Separate Off Canvas Menu - Mobile Menu Disappears Astra Theme Elementor

 

Create Separate Off Canvas Menu - Mobile Menu Disappears Astra Theme

We added our menu items and the SHOP then added the sub categories below the shop.

We then clicked on Appearance –> Customize –> Header Builder and at the bottom left of this new screen you will see the option to select DESKTOP ICON – TABLET ICON and MOBILE ICON.

We selected both the TABLET and MOBILE icons and removed the PRIMARY MENU that was assigned to the OFF CANVAS MENU on the right side of the screen. Simply click below the text on the right called PRIMARY MENU and you will see a + sign then you can ADD the new OFF CANVAS menu to the OFF CANVAS section. You will want to REMOVE the PRIMARY MENU from this location.

 

Off Canvas Menu - Customizer Elementor

 

So now you have the PRIMARY MENU on desktop and the OFF CANVAS MENU on tablet and mobile devices. You do not necessarily need to do it this way but we are able to control the mobile menu by itself as this client also wanted a search bar at the top of the menu and on our desktop version the search is last in the list on the menu.

Next we head over to  Appearance –> Customize –> Additional CSS and add the following code:

 

/* mobile sub nav scroll */
.ast-header-break-point .main-header-menu .sub-menu {
z-index:999999;
display:block;
height: 220px;
max-height: 220px;
width: 100%;
overflow-y: scroll;
}

 

Once you add this code above, save within the customizer and then view the site on mobile.

 

You should now see the mobile navigation and be able to select the SHOP (or whatever you are calling it main navigation item with the drop down categories) and see the categories below it and they are both scrollable and do not disappear when you scroll.

I was looking for a solution to this online and Astro was trying to point me over to a PAID ADD ON (of course you can’t blame them) but FREE is always better.

If you need help with this type of integration or just looking to have a beautiful, professional website developed feel free to contact After Dark Grafx the best website design company in San Diego (well, we had to say that).

Thank you,

James Byrne, Owner, Information Architect, USMC VET

Cali Cosmetics Inc - Home Page

Calicosmetics.com – Shopify Design and Development

FOR IMMEDIATE RELEASE: After Dark Grafx announces the website launch of Calicosmetics.com.

We wanted to thank you tremendously for choosing After Dark Grafx as your Shopify Expert and trusted Shopify Development Partner.

Cali Cosmetics, Inc is an international brand that develops high-quality cosmetics for all walks of life. After developing numerous websites for the company, they once again enlisted the services of After Dark Grafx as their Shopify developer and to create, yet again, another amazing website for their company and main brand.

This client performed a comprehensive search for a reputable Shopify designers and developers to build their corporate eCommerce website. After receiving a glowing recommendation from one of our clients, they decided to retain our services.

This new international eCommerce brand website is the final website of five total Shopify eCommerce Websites that After Dark Grafx has created for this brand. 

 

Calicosmetics.com - Shopify Website by After Dark Grafx

 

 

The visually-appealing homepage allows new visitors to browse personal care products as well as home fragrance amenities, access best sellers, special offers and different programs from the simple menu at the top of the website.

The website also features a convenient shopping portal that  visitors can immediately access at the top of the homepage allowing them to review current and past orders, edit their account and track their orders.

 

We even set up a section where website visitors can get a glimpse of the company’s trending products.

 

Trending Products CaliCosmetics.com Shopify Developer After Dark Grafx

 

Finally, we filled the bottom of the website with enhanced visuals to showcase where the company’s products are sourced, links to other brand websites as well as informing the visitor that the site is safe and secure to shop.

 

Shopify Expert Help

 

View the testimonials and reviews for this company and you will understand that they focus on quality and customer satisfaction.

 

After Dark Grafx has built a stellar reputation as an exceptional Shopify partner. Many businesses across the country count on us to develop remarkable websites for their companies.

Cali Cosmetics relied on our professional consulting services , recommendations and over 29 years of experience to tak them across the finish line and they certainly weren’t disappointed.

Custom work provided to this client:

Shopify Debut Theme Customized – Our team designed an intuitive, custom Shopify theme based off of the Debut Theme for this website to give it a flair and help it stand out from the dozens of other fierce eCommerce competitors in the same niche.

Shopify Product Reviews App – We also integrated a product reviews app to help the company gain testimonials and customer reviews to build brand trust and convince more potential customers to purchase.

MailChimp Integration – In order to help the client build a successful email list, we set up an integration with MailChimp, a leading email marketing provider for eCommerce brands.

Custom Pages and Collection Templates – Our custom development work was created using custom code along with the base Debut Theme integration, in addition to the development of collection templates to complete the entire website.

Other Apps – We customized and implemented other apps such as Order Printer , Shopify Product Reviews and SEO Apps to augment the website’s development and performance.

This client was extremely thankful for our services.


“After Dark Grafx has created several Shopify E-Commerce Websites for us in the past so this was a no brainer. They made it easy for us. 500 Stars!!!”
– Owner – Eric K.


Visit Them Today:

https://calicosmetics.com/ and let them know that James from After Dark Grafx sent you!

 

 

Need a Shopify Website? WooCommerce Website? E Commerce Store? App Developed? SEO Services? Contact us today! FREE QUOTE!

 

 

Tarocco Baroness Cali - Designed by After Dark Grafx - Cali Cosmetics

Tarocco-BaronessaCali.com – Shopify Design/Development

FOR IMMEDIATE RELEASE: After Dark Grafx announces the launch of Tarocco-BaronessaCali.com. – Thank you for choosing After Dark Grafx to design and develop your new Shopify website.

 

Tarocco Baronessa Cali is owned and operated by Cali Cosmetics, Inc. an international brand. After doing such an excellent job on their initial website, Cali Cosmetics retained After Dark Grafx once again to create a new Shopify website for their other brands. Cali Cosmetics performed an extensive search for a Shopify Expert, along with recommendations and a referral from a long-time After Dark Grafx Client, they hired After Dark Grafx to design and develop a brand new Shopify E-Commerce Website for their new business with many more to come.

Best Shopify Developer Shopify Expert

 

Shopify Debut Theme Customized
Shopify Product Reviews App
Other Apps
Mail Chimp Integration
Custom Pages and Collection Templates


After Dark Grafx has created several Shopify E-Commerce Websites for us in the past so this was a no brainer. They made it easy for us. 500 Stars!!!” – Owner – Eric K.

 

 

Visit them today at:

https://www.tarocco-baronessacali.com/ and tell them James from After Dark Grafx sent you!

 

Need a Shopify Website? WooCommerce Website? E Commerce Store? App Developed? SEO Services? Contact us today! FREE QUOTE!

 

RudeDudeCandles.com

RudeDudeCandles.com Shopify Design/Development

FOR IMMEDIATE RELEASE: After Dark Grafx announces the launch of RudeDudeCandles.com   BAD NEVER SMELLED SOOO GOOD! – Thank you for choosing After Dark Grafx to design and develop your new Shopify website.

 

Rude Dude Candles - Shopify Website Design by After Dark Grafx

 

RudeDudeCandle Co. is owned and operated by Cali Cosmetics, Inc. an international brand. After doing such an excellent job on one of their brand websites, Tarocco-Baronesscali.com . Rude Dude contacted After Dark Grafx once again to create their “Rude Dude” website. They performed an an extensive search for a Shopify Expert who understood their brands and competencies. They enlisted After Dark Grafx to design and develop a brand new Shopify E-Commerce Website for their new business with many more to come.


We have been selling candles for years and this just seemed like a good addition to our product line. After Dark Grafx has created several Shopify E-Commerce Websites for us in the past so this was a no brainer. They made it easy for us. 500 Stars!!!” – Owner – Eric J.

 

 

Visit them today at:

https://www.rudedudecandles.com and tell them James from After Dark Grafx sent you!

 

Need a Shopify Website? WooCommerce Website? E Commerce Store? App Developed? SEO Services? Contact us today! FREE QUOTE!

 

Shopify Expert Developer - Tarocco Baronessa Cali Web Design After Dark Grafx

Tarocco Baronessa Cali – Shopify Development & Design

After Dark Grafx announces the launch of https://www.tarocco-baronessacali.com/

After Dark Grafx Shopify Web Design services along with our Shopify Development services, enabled Tarocco Baronessa Cali a Cali Cosmetics, Inc. brand to quickly launch their Shopify Store.

Tarocco Baronessa Cali initially contacted After Dark Grafx to provide Shopify Consulting Services. After Dark Grafx was then retained to perform the Shopify Design, Development, App Installation and configuration.

“After Dark Grafx offered a simple, no nonsense approach to a custom website and design. The site focuses on product sales and conversion for one brand in our product offering. They setup and integrated Facebook Shop, Instagram Shopping, Shopify payments, shipping and inventory management and offered  Custom Shopify Development and coding solution to optimize our product pages. They then created several sub brand websites for our company. We will continue to use After Dark Grafx as our eCommerce Partner.  They are currently working on Google Ads and Facebook Ads for our company. Excellent job! Excellent Service!” – Eric – Owner

 

Shopify Expert Developer - Tarocco Baronessa Cali Web Design After Dark Grafx

 

The Shopify Platform is a robust eCommerce platform with a low barrier to entry along with a “simple to use and understand” interface, this platform allows for businesses large and small to offer and manage a professional eCommerce website without a lot of training.  Easily track inventory, hook into your financial booking and shipping systems and easily manage and process orders make Shopify the “GO TO” eCommerce solution for you.

 

If you need Expert Shopify Help or just have a simple Shopify Question, please feel free to contact us even if you are not doing business with us.

 

We also offer affordable, targeted Search Engine Optimization Services that are customized for your industry.