Category: Wordpress Issues

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

Wordpress Developer in San Diego

How Do I Fix Too Many Redirects Error WordPress with Godaddy

Recently, After Dark Grafx moved a website that was developed on our staging servers over to GoDaddy’s Managed WordPress Hosting– (yes, clicking the link is an affiliate referral). I couldn’t find “one” solution that worked for me, so I had to do some research and narrowed it down to the following.

My client’s website initially worked fine after the move to Godaddy. We moved the database and the files over and redirected and updated all urls for the site. My client then contacted Godaddy and had them install a Digital Security Certificate for the website. They should have consulted with us first before making the site secure. The website then went offline shortly after the SSL install. Godaddy does state “your website may go offline from 24-72 hours while the SSL is being installed and approved” by their system. This is not always the case. Sometimes it is faster or slower depending on the certificate. If your website is still offline after 3 days, you should contact Godaddy via phone to check it the SSL was installed correctly.

So, once the SSL was installed, we encountered the, “Too Many Redirects” warning. Godaddy stated they could fix this issue for a small fee.  Really?  You break my website, then you tell me you can fix it for a fee? No thank you.

Check to see if your website is secure here:  https://www.whynopadlock.com/  (not an affiliate link – just a great free tool to check your website security) the website was still not viewable or working on any device or browser on multiple operating systems.

I began by performing the following tasks:

BACKUP THE WEBSITE AND DATABASE: You should first log in to your control panel and back up your entire website, database, files, etc. Contact your current host for help with this before you start the process below. You have been warned!


CHECK THE WORDPRESS SITE URLS:
If you CAN access your WordPress Admin, you should check to make sure that the URLS are EXACTLY the SAME under the site settings located on the left of your admin.
SETTINGS —> GENERAL

If you CAN NOT access the WordPress Admin but you have FTP access to the website, you can download and edit the wp-config.php file. Be sure to make a backup of the wp-config.php file in case you make a mistake. If you make a mistake, you may take your website offline.Simply add the following code above the  /* That’s all, stop editing…. */   text within this file.

define(‘WP_HOME’,’https://www.YOUR-DOMAIN-HERE.com’);
define(‘WP_SITEURL’,’https://www.YOUR-DOMAIN-HERE.com’);

/* That’s all, stop editing! Happy publishing. */
Save the file and re-upload it to your server.

Go to your website and refresh the page that was not working. Be sure to add this variable ?junk=1 after your website url link like this (  Example: https://www.YOUR-WEBSITE-HERE.com/index.php?junk=1 ) since WordPress Managed Hosting on Godaddy uses Varnish Caching (meaning, it is server-side caching to speed up the website so refreshing the browser cache without the variable added above to end of the url does nothing so you will still see the old page and errors. Once you add this variable, it will show you the newest page.
You don’t have to make it ?junk=1  you can call it whatever you like  ?mytexthere=1
).

If you have a contact page and the url is https://www.YOUR-WEBSITE-HERE.com/contact-us/   then the url would be https://www.YOUR-WEBSITE-HERE.com/contact-us/?junk=1

If site still doesn’t load, add this to the top of the wp-config.php file.

define(‘FORCE_SSL_ADMIN’, true);
// in some setups HTTP_X_FORWARDED_PROTO might contain
// a comma-separated list e.g. http,https
// so check for https existence
if (strpos($_SERVER[‘HTTP_X_FORWARDED_PROTO’], ‘https’) !== false)
$_SERVER[‘HTTPS’]=’on’;

This will force the WordPress site to use SSL for all of its’ connections. So be sure that you are using https not http for all of your website urls.

If this doesn’t work, proceed to “CHECK WORDPRESS PLUGINS” below.


CHECK THE PLUGINS:
I logged in via FTP and changed the name of the plugins folder located in the WordPress installation typically here wp-content/plugins to plugins_back. This will not destroy your website, just rename it back to plugins when you are finished testing. I then refreshed and cleared my browser history and tested the site again. Site still did not work.Sometimes there are plugin conflicts or the plugin itself is to blame. If your site loads and the error is gone after renaming the plugins folder, then you know it is a bad plugin that caused the issue. You would then rename the plugins_back folder back to plugins and then rename each of the plugin folders to selectively disable them. I typically just put a “z” in front of the folder name. Do this for ALL of the plugin folders within the plugins directory. Then, rename the first plugin folder by removing the “z” so it is now the original name of the plugin folder.

Example:  plugin folder is named    contant-contact-plugin  I would rename this to zcontant-contact-plugin then test to see if the site loads.Go to your website and refresh the page that was not working and don’t forget to add this variable ?junk=1 after your website url link like this (  Example: https://YOUR-WEBSITE-HERE.com/index.php?junk=1 ) since WordPress Managed Hosting on Godaddy uses Varnish Caching (meaning, it is server-side caching to speed up the website so refreshing the browser cache without the variable added above does nothing so you will still see the old page and errors.You don’t have to make it ?junk=1  you can call it whatever you like  ?mytexthere=1 ).

You would then go back to your FTP program and rename the next plugin. And repeat the steps above, except when you get to the website url, change it to ?junk=2  – You have to change the number after the equals sign each time you want to refresh the latest changes that you made, so that the Varnish Cache refreshes and shows you the newest page / code so you can see if it fixed the issue or not.

If you you have 10 plugins and you get to #5 and the website starts to work correctly, then you know it is one of the plugins – so you should do the same steps above for each of the plugins that you need to use for your site in the plugins folder to determine which plugin was causing the conflict.


CHANGE URLS IN DATABASE: 
In some cases, you may have to double check that all of the urls are pointing correctly and using the correct url.  If you moved your site from https://www.MY-DEVELOPMENT-SERVER-URL.com and now it is on https://www.YOUR-WEBSITE-NAME.com then you have to make sure that all references to images, code, etc. are updated in the database and any custom edited files in php.

If you are able to login to  PHPMYADMIN: (see this tutorial)

Press on SQL section in phpMyAdmin and enter the following code:

UPDATE wp_options SET option_value = replace(option_value, 'oldurl.com', 'newurl.com') WHERE option_name = 'home' OR option_name = 'siteurl';UPDATE wp_posts SET guid = replace(guid, 'oldurl.com','newurl.com');UPDATE wp_posts SET post_content = replace(post_content, 'oldurl.com', 'newurl.com');

UPDATE wp_postmeta SET meta_value = replace(meta_value,'oldurl.com','newurl.com');

This code will replace all instances of oldurl.com to newurl.com. For example if your current WordPress address is oldurl.com, it will be changed to newurl.com. Also note, that some developers change the PREFIX for the wp_options and wp_posts – so be sure that you are using the same tables in this SQL request. Example:  if they called it  rs_options and  rs_posts  instead, you would change these in this SQL request.

IMPORTANT! Do not forget to replace oldurl.com with your current WordPress address and newurl.com with your new WordPress address.

IMPORTANT! Download the original SQL WordPress Database before you begin making any changes. Simply select the database name on the left of the screen then select EXPORT —> GO  and make sure SAVE TO FILE is selected on your screen. Some hosting companies have this set by default. Sometimes you will have to click on the ADVANCED link on the export page to see all of the options.

CHECK THE CODE:  If your site was created by a developer, ask them to edit the custom pages of your website that may have direct, absolute links to images or links (http://www.YOUR-SITE-HERE.com/wp-content/uploads/01/YOUR-IMAGE.jpg). Notice that this url is NOT secure using https. Have them fix all of the references to http or just tell them to make the site secure for you.

If you do not have a developer and are still experiencing issues, you can also contact After Dark Grafx.

Some developers are lazy and will place a direct image reference like this in your header.php, footer.php or other page or pages of your website to make it work for their development.After performing all of these tests, and then adding the directives, the site should work correctly.

.HTACCESS: In some cases, you will need to make changes to your .htaccess file. This is the file that controls what your website will do in terms of forwards, redirects, denying access, etc. Some plugins add data to this file that can ultimately conflict with your website. We are not going to cover this file as it is “host-specific” and needs to be analyzed before making any adjustments.

If you are still experiencing issues, you can also contact After Dark Grafx. Toll Free: (888) 578-8300.