Mobile Menu Issues on Pro

Support
#1

I am trying to do a few things with the mobile menu on Pro and can’t seem to figure it out. My site is https://kloosterfamilydentistrycom.stage.site/.

I would like to use the current menu I have set up, but once the menu becomes the mobile version (using the hamburger icon) I am having some issues:

  1. I can’t figure out how to change the active link color of the hamburger icon.
  2. I want the menu to be the entire length of the phone jus like it is HERE.
  3. I want the menu sub navigation to open down instead of to the side similar to HERE. You can’t read the submenu nav when it pops to the side on mobile.

#2

Hello Matt,

Thanks for writing in!

Before anything else, I would highly suggest that you replace navigation dropdown element with navigation collapse or navigation layered element instead. Navigation dropdown element is only good for desktop or bigger screen sizes.

And to change the active color link, please make sure that you have set the base and interaction text color and the background color.

Find the Menu > Links > Text and the background colors can be changed in the Menu > Links > Setup.

Hope this helps.

#4

Hey Matt,

Your post reply has been withdrawn. Is you issue resolved already?

Kindly let us know.

#5

I have resolved this issue but I am still experiencing some issues on mobile.

  1. The bottom footer with the copyright cuts off on mobile. How can I get it to stack in the center and not cut off?

  2. I can’t get the text in the top header to center like I was able to do with the social icons. How Can I get this centered?

#6
  1. On my “Blog” Header the Top Header is set to stack like all the other headers I’ve built and for the line between the words and social icons to dissapear, but for some reason it is not working correctly on this one.
#7

I’m also having another issue only on mobile I’m assuming has to do with the header setup. If you look at the home page on mobile, the Slider is working as it should. I duplicated this exact slider and placed it on the https://kloosterfamilydentistry.com/holly-springs/ page and the https://kloosterfamilydentistry.com/raleigh/ page. I switched the images - but nothing else. The only difference on these pages is they are utilizing different headers. The Slider has all the exact same parameters set up, but as you can see, even in desktop, it is not as large on those two pages as it is on the home page. This is in turn cutting off the slider on mobile. Can you take a look at what header setting might be affecting this?

#8

Hello Matt,

Thanks for updating in!

To resolve your footer, please set the Flexbox settings of the container in your footer bar as Column.

And then for your header, there is a text alignment in the text setting. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#9

Thank you. I just added a secure note. I am unable to figure out the slider issue i mentioned as well as the issue with the “Blog” header and centering the text.

Your tip did resolve the footer issue.

#10

Hello Matt,

In some of the element in your blog header, you have added custom inline css in the bar settings such as this:

@media (max-width: 767px){
  .$el .x-bar-content {
    justify-content: center;
  }
}

It would be best that you use the same header that you use in the home page for your blog to have the same look. It seems that they have same content anyway.

Regrading your slider, there is no issue in it. The problem is the custom header which you will need to edit and make sure that the initial position is Relative and not Absolute because it is covering the slider right now.

I went ahead and edited the header to change the position. Please check your slider now.

#11

Thanks so much. Everything is working correctly now except for the blog header. The blog header is different than the other headers, it also includes a Bar 3.

The code you mention above is used on each of the other headers in order to center everything. It was given to me by someone on your staff.

I’m not sure what to do to get the top header centered on mobile as it needs to be and is on all the other headers.

#12

Hello Matt,

Thanks for the updates.

The easiest way to resolve your blog header is to add another bar that will be exclusively visible in smaller screens. In this way, you can create the bar differently from the current bar displaying for desktop screens. You can always show or hide the bar by utilizing the “Hide During Breakpoints” option which can be found in the bar settings. To know more about this option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps. Kindly let us know how it goes.

#13

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