Sub menu custom link not working on mobile?

Posted in: Newspaper
Post count: 78

Hi Guys,

I am creating a business directory page, with one main page and lots of custom links as sub menus.

These custom links include the full url of the page plus an anchor.

This all works fine on desktop, but on a mobile menu the links do not work?

Please see below my own demo website for now, as work on main website is ongoing.

https://www.pixelcities.co.uk

Kind Regards

Mark

Post count: 78

On further investigation….

Once first landed on page ..if I go to menu ‘business directory’ the drop down sub menus they all appear in white and it works!, but then try again they are all highlighted blue and do not work?

Then click on say ‘news’ go to that page or post. Then try again ‘business directory’ back to white and work again!

Hopefully there is a simply solution? .. is it a cache issue?

Kind Regards

Mark

Post count: 35449

Hi,

The thing is that the anchors that you set in Business directory will be executed only the first time when the Business directory is not visited, after that the page will not longer load and will only search for the anchors, on desktop this is working, but on mobile not, what you can do is to set before the #tag the ? like this -> https://i.imgur.com/12tAKC6.png setting this parameter in your menu elements should fix the problem.

Let me know the results!
Thank you!

Post count: 78

Hi Calin,

Thank you for your reply.

I have set all to this parameter like you suggested in the menu url but still the same issue unfortunately

https://www.pixelcities.co.uk/business-directory-2/?#aircon

Kind Regards

Mark

Post count: 35449

Hi Pixel Cities,

Please remove the link from the Business Directory 2 element from menu and let the url only for sub-menus, this should no longer activate the link in menu, as long this is activate the anchor on mobile will not work, you need to re-access the link each time on mobile.

Thank you!

Post count: 78

Hi Calin,

Sorry its not working, this is very confusing. I have removed the Business Directory 2 page from the menu and replaced with a custom link ‘Business Directory’ this has no URL or link.

Then I have all the professions as custom links and as sub-menus under ‘Business Directory’ as you can see.

Each one have the have the url link to include the anchor as follows:

https://www.pixelcities.co.uk/business-directory-2/?#accountants

https://www.pixelcities.co.uk/business-directory-2/?#aerialtv

https://www.pixelcities.co.uk/business-directory-2/?#aircon

https://www.pixelcities.co.uk/business-directory-2/?#arch

https://www.pixelcities.co.uk/business-directory-2/?#asbest

https://www.pixelcities.co.uk/business-directory-2/?#audio

Please advise Calin?, what am I doing wrong? this is of up most importance as I have a meeting tomorrow to present!

How would you set this up?

Kind Regards

Mark

Post count: 35449

Hi Pixel Cities,

Lets start with the with the way that the anchors need to be made.
You need to set on row a extra class -> https://i.imgur.com/m9VWbTG.png after that in menu you need to set the navigation link like this -> https://i.imgur.com/SMZGnMA.png
the code can be get from here and you just replace the scroll target and scroll class (for example your navigation label will be like this https://pastebin.com/nYU0ax9g).
Using this method the menu will work on responsive version too.

Hope this will help you!
Thank you!

Post count: 78

Hi Calin,

Thank you for your reply.

Ok, so you would create the whole page in TD Composer? with a row for every profession? and set an extra class in each?

Then create a custom link for each profession in the menu and add the relevant code?

I have been using the Block Editor to create the page and adding an anchor under advance tab there?

How would you create the page in TD composer?

Company logo aligned left with copy on right.

Also Calin, I have 105 professions in total! a lot .. how can show the drop down in columns rather than one huge long list?… I understand this is not achievable once viewed on mobile.

Kind Regards

Mark

Post count: 35449

Hi,

If you want you can set only want row and inside of it you can set inner row and set on these the code.
Usually, yes, we recommend to use tagDiv Composer for pages -> https://forum.tagdiv.com/homepage-how-to-build-and-set-it/
Unfortunately only using this method the menu will work in mobile, here is a demo that is construct using the methods I provide above -> https://demo.tagdiv.com/newspaper_dentist/

I think that this “how can show the drop down in columns rather than one huge long list?” is referring to menu:

For the moment with a theme setting it is not possible. However I could give you a CSS code for it
2 columns – http://prntscr.com/n9w5z3
.menu-item-49 > .sub-menu{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
width: 20em!important;
}

In the phones field use something like this – http://prntscr.com/nafbws
– http://prntscr.com/nafc3t
.menu-item-49 > .sub-menu{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

Thank you for your understanding!

Post count: 78

Hi Calin,

I am as you recommend creating the Business Directory page in TG Composer now, to incorporate the above replies. Thank you

This is how I am creating it..? is this how you would create it?

Row..inner row … 2 columns.. image ‘Company Logo’.. text ‘Company description’ to the right of image

Inline single image for the logo

Inline text for the description

The description has their company info and includes email and website address.

How do I make these clickable links please ?

Kind Regards

Mark

Post count: 35449

Hi,

Yes, you can use this method, also the link can be set like this -> https://i.imgur.com/PzUAd1k.png all you need to do is to set that html element.

Hope this will help you!
Thank you!

Post count: 78

Great, thanks Calin.

I shall give it a go.

Also, referring to the sub menu in columns CSS code you kindly provided i.e

For the moment with a theme setting it is not possible. However I could give you a CSS code for it
2 columns – http://prntscr.com/n9w5z3
.menu-item-49 > .sub-menu{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
width: 20em!important;
}

In the phones field use something like this – http://prntscr.com/nafbws
http://prntscr.com/nafc3t
.menu-item-49 > .sub-menu{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

Will this effect all the menu buttons across the site? … or just Business Directory?

Kind Regards
Mark

Post count: 18283

Hello !

This should work site-wide from what I can see.

Thank you !

Post count: 78

Hi,

I require extra columns to work under only one Menu item/sub-menu ?? ‘Business Directory’

All the other’s are fine in one column.

Kind Regards

Mark

Post count: 18283

Hello !

Unfortunately this option is not available in Newspaper Theme at the moment.

Thank you for your understanding !

Post count: 78

Hi !!

I know it’s not an option in the theme at the moment, this I understand.

But surely there is some code to make this happen?

Calin has been dealing with this question, please reply Calin.

I require extra columns to work under only one Menu item/sub-menu ?? ‘Business Directory’

All the other’s are fine in one column.

For the moment with a theme setting it is not possible. However I could give you a CSS code for it
2 columns – http://prntscr.com/n9w5z3
.menu-item-49 > .sub-menu{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
width: 20em!important;
}

In the phones field use something like this – http://prntscr.com/nafbws
http://prntscr.com/nafc3t
.menu-item-49 > .sub-menu{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

Kind Regards

Mark

Post count: 35449

Hi Pixel Cities, this thread was take by Vlad because I had some days off.

I think that the above code can be adapt to work only for one item from your menu, but in order to be able to make this code for you, I need to check your menu, and for the moment your website is under construction-> https://i.imgur.com/s0vqFGA.png
Let me know when this is only, to change cheek the menu.

Thank you for your understanding!

Post count: 78

Hi Calin

Thank you very much for your reply.

I shall be back in touch, as the site in question is being migrated over to another server at the mo 3-5 days.

So no work can be done until I get confirmation its done.

Once complete, I am going to set up a support login on a staging url, so I’ll give you the login details.

Chat soon

Kind Regards

Mark

Post count: 78

Hi Calin,

Please can you pick back up where we left off with this question above.

The menu item is ‘Business Directory’ only. I require extra columns as the completed menu list is very long as you can see.

I have set up a support login for you

The site login details are:

https://www.ircatoday.com/wp-admin

Kind Regards

Mark Fraser

  • This reply was modified 5 years by Calin.
Post count: 35449

Hi,
You can try this custom css -> https://i.imgur.com/J9bdokq.jpg
.menu-item-1269 > .sub-menu{
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}

This code will apply only on that menu item and it need to be set in theme panel> custom code> custom css -> https://i.imgur.com/3EGPWHH.png -> https://i.imgur.com/6lrSvTH.jpg
Also please do not share your privet credentials on forum.
Thank you!

Post count: 78

Hi Calin,

Thank you, yes 5 columns work on desk top but nothing even shows on mobile?… just two columns on mobile would be fine please

Also if you take a look at my menu… I have a MOBILE SERVICES drop down.. this isn’t showing either?

Kind Regards

Mark

Post count: 35449

Hi,

The problem from mobile was solved by setting the css per each device -> https://i.imgur.com/2oI3zGH.png

Please check the menu and let me know if this is alright!
Thank you!

Post count: 78

Hi Calin,

Thank you for your support in this matter. Its much appreciated.

I have been testing on both safari and chrome browsers! … and tweaked the column numbers.. deleted the code on the mobile entry as it wasn’t working properly.

The mobile is the worse problem? …only the Business Directory page, across all devices is ridiculous slow?? and also now only reads down to ‘Garden Nurseries’ on mobile why?

Why is this the case? … any suggestions?

I have a redirection plugin active as you can see to go to the lite version… whilst work is ongoing to finish the main site… is this the problem?

I also duplicated the main home page called it ‘Stage’ and changed the url of the headers for testing purposes.

I changed one of the older posts template so we can test how it looks and works

https://www.ircatoday.com/75th-ve-day-celebrations-recaptured-by-cllr-dibben/

If you could take a look please .. and advise a solution as the business page is vital to the sites existence.

Kind Regards

Mark

Post count: 35449

Hi,
Indeed the page https://www.ircatoday.com/business-directory/ is loading quite slow because the page is so big -> https://i.imgur.com/LGrcCu2.png and is take some time for mobile devices to load it. Now you have one page with all services, to get a better preformats, you can set a page fore each services in part, in this way the page will be load faster on desktop and mobile.
Also is look that the elements from mobile menu are not all listed because there is set a max-height, for this you can use this custom css -> https://i.imgur.com/vNUqy8w.png
.td-mobile-content .td-sub-menu-open > ul {
max-height: 20000px;
}

Thank you!

Post count: 78

Hi Calin,

So you suggest creating a individual page for each service? over 100!.. this would obviously make the one page scrolling idea would be no more and delete entirely??

Also the burger menu when viewing the business directory page isn’t working??

Since the last theme update I’ve incurred issues with speed and plugin conflictions? …. which php version do you recommend?.. currently running 7.4

Kind Regards

Mark

Viewing 25 posts - 1 through 25 (of 41 total)
The forum ‘Newspaper’ is closed to new topics and replies.