Problems with Mobile Version Nav Menu

Support
#1

Hello
For ages now I have tried to get the mobile version of the Menu working on the site but it’s just refusing.
This has never worked since the theme was installed.

First off the Menu button is the wrong colour blue. It should be #0086bb but it is a very dark blue for some reason?

Next is that when you click an Anchor point in the mobile menu the site doesn’t scroll down. I have tried lots of different fixes from the forums but nothing seems to work. I have removed the One Navigation from all the pages, got the javascript temp fix in. I have tried different CSS codes. In the end I got so confused I have removed most of the code so I can start again.

The other is the Javascript with the telephone number jumps under the navi menu when you open it on phones. So I need to find out how to either do the same in CSS above the menu or to keep that script from moving.

I am also getting a lot of 404 warning for pages not working and its taking the site a long time to open or refresh.

http://www.creativelandscapesuk.com
Please can someone help so I can give this site back to my client. Thank you

#2

Hi there,

Thanks for writing in! I see you’ve a lot of custom CSS and Javascript added, first remove all of your custom CSS, and scripts so we have nothing conflicting but make sure to take a complete backup first of your custom CSS and JavaScript snippets.

Then to have one page navigation make sure you follow https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96 correctly as this will work in desktop and mobile versions without a problem.

To change the mobile menu button color, you can make use of the following CSS code:

.x-btn-navbar {
    background-color: #0086bb !important;
}

You should add your phone number in the Topbar instead, please navigate to Theme Options > Header > MISCELLANEOUS and turn on the Topbar and add your phone number in TOPBAR CONTENT

Hope this helps!

#3

Thank you for your reply Nabeel

I have all the css changed but as you can see when I remove it there is a lot changes.
Even though we have a background added to the body, the background doesn’t turn up its just white and the header and footer are a strange dark blue colour. So other than the css code to things transparent I have no idea what to do.
However the piece of code you gave me changed the Menu bar thank you.

I double checked by Id tags per pages which are in the right places. I checked the tags in the Menu and they are right and the desktop version of the Menu works but not when it goes to the mobile version.

The top bar menu is very small where it was nice and big on the left before and isn’t fixed in place like the Header is so disappears when we scroll down. Its one of the reasons we took it out before because we couldn’t find how to fix it.

I have also tried disabling the plugins but this also doesn’t help.

Thank you for your continued support.

#4

Hi @RebootDesigns,

In this case, to investigate your setup further. Please share us your admin credentials in a secure note.

Once we could check, we’ll do our best to help you.

Thank you so much.

#6

Hi There,

Thank you for the credentials, please navigate to Appearance > Menus

Instead of using an absolute link (e.g. https://www.creativelandscapesuk.com/#Contactus), please use only the ID in the URL (#Contactus)

Then do not check the Primary Menu options since this menu is only for your home page.



The custom CSS provided by Nabeel above should resolves the toggle color issue.

Hope it helps,
Cheers!

#7

I have done all that you asked. The Button colour works but only on the home page but the Mobile menu is still broken.

The other problem is when you then switch to say the project pages the menu buttons don’t work.
They only work on the front page. Hence https://www.creativelandscapesuk.com/#Contactus

Thanks for your continued help

#8

Hello There,

This issue is caused by the duplicate element IDs in your page.

Please be advised that an element ID must be unique. There should be no duplicate. You will have to use it once to avoid any conflicts. To resolve this, please remove the duplicate IDs and use the ID in the section instead. Only one section must have the ID. You insert multiple rows and you can show/hide the rows for specific screen sizes. This is the right way of doing it and not by having two sections with the same ID.

Hope this explains it briefly.

#9

Hello RueNel

I have checked and there was indeed double the ID tags. I had it in the row and in the titles. So I have removed it from the titles.

Problem is it still doesn’t work. You can open the menu, it clearly shows it pointing to the anchor point but it doesn’t scroll down at all. Is there a piece of code missing stopping the scrolling from working?
Also the mobile button changes back to the default blue when its not on the home page.
How do I fix it to stay the same colour no matter what page it is on?

Thank you

#10

Hey Drew,

There’s something in your site, most probably a script preventing the default behavior of the menu links on mobile only. Regretfully, I was unable to pin point what exactly is causing it. Have you added a custom script in your site?

We still could not consider this a bug though as I’ve tested the One Page Navigation in my test site and it works both in desktop and mobile.

Thanks.

#11

Hello Christian

The mobile version of the site hasn’t run since I set the website up.
I haven’t got any custom scripts anywhere in the site.
I have been battling with all these things since March:

  • The backgrounds not showing throughout the website even though a background is listed.

  • Top bar not staying once the site scrolls down, so used Java script to put the details in but it drops below the mobile menu when opened.

  • Mobile menu doesn’t scroll down to specific points

  • Colours of HTML links hover colour didn’t show it was just stuck on default colours. The mobile menu colours also not working.

Does this mean I have to scrap the website and reload a new download of the website. I really don’t want to do that.

I have just remembered something.

When I tried to install the file onto the server the server said the file exceeded the file limit.

I have just tried to do it again. I have ran into this problem the whole time with the website.
I had to load the website not through Wordpress to be able to get it to install. Could it be possible that it missed some necessary files which is causing all the problems.

Edit:
I have managed to speak to the server to change the file size and reloaded the theme but it still doesn’t work.
What else can I do to try and fix it?

#13

Hi Drew,

Please contact your hosting support regarding the file exceeding issue (upload_max_filesize) as that is a server-side configuration.

Would you mind removing (set to 0) the negative margin you set on the first ROW.



And instead of using the slider shortcode inside a Text element, would you mind using the Classic Layer Slider element instead.

Hope it helps,
Cheers!

#14

I said I had managed to fix the upload problem with my server.

I did try to change the slider but I have put it back. The slider works perfectly in both desktop and mobile version. If you disable the plugin the Mobile version of the site still doesn’t work. The classic slider doesn’t allow me to set sizes, to fill the whole row so it fills the pages like the banners and Slider Revolution I hate using as its so fussy to use in comparison. The client wants to just change the photos when ever he likes meaning I can’t Photoshop the files to a certain size as he doesn’t have the capability to do that himself.

I am currently taking my site apart piece by piece but still not fixing the actual problem of the scroll not working in the mobile version.

#15

Hey Drew,

I thought you followed @RueNel’s suggestion to remove double IDs in your content that is why I didn’t take this into account and looked else where. It turns out you did not do what he suggested. You still have double and in fact, multiple IDs in your home page.

I discovered that when I created a test page and the one page mobile menu works in there https://www.creativelandscapesuk.com/x-support-test.

Please fix your home page.

Thanks.

#16

I don’t know where your finding the double tags from.
I did exactly like RueNel asked and found there was a tag in the title and in the section ID bit. They were not present on anything else.
There is now ONLY tags in the Section ID under customisation

The only other bits were the tag was present was the mobile pages so I have removed the tags from the mobile pages and it still doesn’t work.

#17

I have finally understood what is happening!

In my front page I created a Banner and a Mobile Banner section.
So one was for the desktops and I altered the screen to fit for mobiles on the Mobile one.
However in doing so this has confused the menu for some reason.
So at the moment it only works with the desktop version of the links the mobile side is hidden. When switched so the desktop sections are hidden and the mobile one is active the menu suddenly doesn’t work.
When I make a separate Mobile Front page version it works fine but this isn’t what I need.

I have therefor removed the mobile version of the website and just altered the main page so the text fits both instead. I know there is a way I did it before but to get it completed and set off this will work for now.

I have put my CSS code back in to put my backgrounds back in.
But is there a way to possibly add the phone number to the header above the navi bar so it scrolls with the header. The top bar leaves a big gap and disappears. I would like it all in the header if possible.

Thank you for your continued support

#18

Please set it up in the top bar so we could see the issue. I’d recommend that you upgrade to Pro though so you’ll have more layout options for your header. Including the topbar when the header is fixed is not possible.

Thanks.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.