Mobile Nav Bar misssing

Support
#1

Hello,

I am unable to get the nav bar to appear at all on mobile. I have attempted to deactivate all 3rd party plugins and that did not fix the issue. I also look at other threads and their solutions were not relevant. Site is https://pd.oconnorv.com.

Thank you!

#2

Hi John,

Thank you for writing in, the logo is actually there in the middle underneath the logo, but it’s white on a white background, that’s why we can’t see it. You can use the custom CSS below to change its color.

Add this to Theme Options > CSS

@media (max-width: 979px) {
.x-btn-navbar,
.x-btn-navbar:hover,
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover {
	color: #156cc4;
}
}

But please keep in mind that this fall as customization and we can not provide support further from here.

If that did not work and you have existing custom CSS on Theme Options > CSS, please check all your custom CSS here and address all found errors.

Hope it helps,
Cheers!

Disappearing Navigation
#3

Hello,

That custom CSS didn’t seem to help at all. I added it in as described, saved, and loaded the page in a private tab on an iPhone running iOS 13.3.1. The menu does not appear at all.

When I tap where the menu should be, my input does nothing, suggesting that the menu is either not there at all or is blocked by some other element. The problem is not simply that the menu is white on white background. I do not have any other custom CSS. Any additional thoughts are greatly appreciated.

#4

Hello John,

The code is not working for you because you have inserted it incorrectly.
Kindly remove this block of code:

@media (min-width:980px){
    .x-nav-collapse.collapse{
        display:block;
    }
    @media (max-width:979px){
        .x-btn-navbar,.x-btn-navbar:hover,.x-btn-navbar.collapsed,.x-btn-navbar.collapsed:hover{
            color:#156cc4;
        }
    }

You should update it and replace it with this code:

@media (min-width:980px){
  .x-nav-collapse.collapse{
    display:block;
  }
}

@media (max-width:979px){
  .x-btn-navbar,.x-btn-navbar:hover,
  .x-btn-navbar.collapsed,
  .x-btn-navbar.collapsed:hover{
    color:#156cc4;
  }
}

What is missing is the close curly bracket of the first @media block.

#5

Confirmed this fix worked. Relatedly, the “shop” link is grey while the other links are blue. Where can I change the shop link color?

#6

Hi John,

That means those blue menu items are treated as active (current), I see that you used absolute link on those items (e.g. https://pd.oconnorv.com/#contact), please change those to relative link instead (e.g. #contact, #retailers, etc.).

You can leave the shop menu item as is since that is needed to be linked on the shop page.

Thanks,

#7

I used the absolute links because when on the shop page, the relative links no longer work (since there’s no #contact on the shop page). Is there an easy fix or should I just let this one go?

#8

Hi John,

Do not set your One Page Menu as the Primary Menu because your One Page Menu is designed to work and assigned to a specific page only.

Create a new menu instead and set this menu as the Primary Menu, now this will be your menu for all pages and posts, except the page that is using the One Page Menu. Now you can use an absolute link on this Primary Menu so you can link it back to the main page.

Hope this shed some lights,
Cheers!

#9

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