Mobile Menu One page navigation problem

So I made my header menu one page navigational, everything works good except under mobile. When I go to click on the menu it wont even click now, and before, instead of going down, it would go up. Is there a way to fix it?

This is the website with the issue www.segwarriors.com

Hi @Thearee,

Thanks for writing in.

I could not see any problem in the front page.

First, please try to check for plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If still it is not working, please share us your admin credentials so we could check your setup closer.

Don’t forget to set it in a secure note.

Let us know how it goes!

Thanks

I deactivated every single plug-in, and I still had the issue. I then did some brainstorming, and saw that the issue was with the section ID. Now I have copies of all my sections under the same ID names. How can I create a custom header menu for each platform? for example, Desktop view, Tablet view, Mobile view etc…?

Hello There,

Please be advised that an element ID especially the section IDs must be unique. No duplicates should be present in the page to avoid any conflicts or error. I would suggest that you create one section with an ID in it and then create rows as many as required that will be hidden or displayed in different screen sizes.

What happen in your set up is that you created a two sections that bears the same ID. For example, for your living-1 section, it is best that you create one section for living-1 and insert two rows. The first row could be visible in larger screens and and second row should be only visible in smaller screens.

Hope this helps.

I understand, each section should have it’s own unique ID name, my question now is how can I make the custom inline navigation menu be fixed at the top, but when scrolled, have the background color change to a solid color?

Hi there,

It’s already fixed on top with background color, if it needs to be a solid color then change this custom CSS to your preferred solid color.

.x-navbar.alt-color {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

Thanks!

I apologize I don’t think I have been very clear. So I have multiple sections with different ID’s now. Because not all sections look good under different platforms, I had to make multiple copies of one section, and modify each section to fit the platform (example, mobile),

to add on to that, I made the page a “One Page Navigation”, My header links are to section ID’s pertaining to my Desktop view and Laptop view. When I try to use the same menu under mobile view, the One Page Navigation doesn’t work, because the links pertain to a different section ID " I understand that".

My question is, can I have multiple Header Navigation menus, where I can hide each one for different platforms like, a header menu for Desktop, Tablet, Mobile?, If I can’t , can I customize the inline navigation element to act like my primary header menu?.

Ohhhhhhhh I See ok I’ll Try this, sorry I didn’t read the whole thing. I thought you where trying to show me how I can name the sections.

Hi there,

Yes, please try it first. About the section naming, is there any issues with it? I just thought it’s now fixed based on your reply to @RueNel.

Thanks!

Success!!!, Yes Rad Its all fixed, I now have it just like I want it. Thank you @nico , @RueNel , and @Rad for your help.

In case anyone is looking for the same thing, look at RueNel’s reply, it worked for me :smile: :sunglasses:

1 Like