Header messing up on 2 menus

Support
#1

Hi. My header is messing up on two device sizes: 768px x 979px and 480px and smaller devices.

On the 768px x 979px one, the menu runs into the logo and goes on 2 lines. On the 480px, the Learn More buttons which are supposed to be at the bottom of the smaller photographs on the first page end up being stacked above each other and they’re not even centered.

I read in this article https://theme.co/apex/forum/t/pro-header-sub-menu-links-mobile-problems/22449/4 in the Knowledgebase. I got as far as this line…“Select the screen you’d like this element will not display.” I selected the two devices but nothing worked. Regarding the next sentence, “You will then add a navigation collapsed element and do the opposite Hide During Breakpoints setting.” Where do I add this to?

Here are the two screen shots that I saved:

https://www.reactivemedical.com/wp-content/uploads/2018/03/Header-on-768px-x-979px.jpg

https://www.reactivemedical.com/wp-content/uploads/2018/03/Header-480smallerdevice.jpg

Thanks in advance.

#2

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#3

Sorry…here it is…it’s for a client:

https://www.reactivemedical.com

#4

Hi there,

The best solution for you will be that you have separate Bars for each device width which you have mentioned, and you add proper elements and menu items link sizes to accommodate that screen size. Then you can use the Hide Based on the Breakpoint option of the Bar to hide one and show another in different browser window sizes.

For more information:

Thank you.

#5

I am not following you. If this is supposed to be an all encompassing theme, why am I having this problem? Why doesn’t it just resize on its own? If I could have downloaded the demo content, I would not have this problem correct? But downloading the demo content for X Pro is not available. Why?

I am new to X Pro theme. How do I achieve this and accommodate it using one website design? >
“The best solution for you will be that you have separate Bars for each device width which you have mentioned, and you add proper elements and menu items link sizes to accommodate that screen size.”

Do I edit while I have the icon for each format chosen then change the size of the header? Won’t it mess up the original one that’s the desktop version?

#6

Hello There,

Thanks for getting back to us.

If this is supposed to be an all encompassing theme, why am I having this problem? Why doesn’t it just resize on its own?

  • Because you are using the custom header. With custom header, you will have to design both the mobile and the desktop menus and other items in the navbar.

If I could have downloaded the demo content, I would not have this problem correct?

  • If you downloaded the demo, you would still have the same problem with custom header. The demo contents is using the default navbar, a custom designed for each stack as the default navbar.

But downloading the demo content for X Pro is not available. Why?

  • The demo content is only available to X theme. Please understand that the X theme is for beginners and intermediate users. Pro theme is best for intermediate and advance users like designers or developers which is why the demo content is no longer available in Pro theme.

When you create a custom header, page content or footer builder, there is a tool that you can preview the display output in a different screen size. It is best that you review this Youtube video:


Hope this helps.

#7

Thanks. So I will just create a custom header for these 2 sizes and then apply it while I am in that mode correct? I will try it tomorrow and then let you know how it goes. Thanks for the videos.

#8

Hi There,

You wont create two headers but two bars inside a header. Each bar has a customize tab and you can choose to hide it based on screenwidth on the customize tab.

Hope it helps!

#9

Oh thanks for clarifying that! I will try it tonight and post the results when I am done.

Grace

#10

Ok I got the header problem solved! But I did not know how to fix the Learn More buttons not showing up underneath the corresponding photographs. I did however, make one change. I deleted Section 3 where these Learn More buttons were originally placed in 4 separate columns and instead, I added a row in Section 2 right underneath the photographs. I thought this would solve the problem but it did not. I am also having the same problem on the Our Team page with the names of the team stacking on top of each other instead of under the photos.

The 2 devices where the Learn More button breaks are for 768x979 device and 480 & smaller devices.

How can I fix this because it looks odd not being under the photographs and we don’t want these buttons in a vertical row. See the 2 screenshots below. One more thing. The main photograph on the home page above these 4 photos isn’t resizing properly with the smaller devices. It’s getting cut off. Is there any way that I can solve this issue as well?

Thanks in advance!

https://www.reactivemedical.com/wp-content/uploads/2018/03/Buttons-not-under-photos-768x979-Mar-19-2018.jpg

https://www.reactivemedical.com/wp-content/uploads/2018/03/Buttons-not-under-photos-480-smaller-Mar-19-2018.jpg

#11

We are so sorry for this but the last question is a new one.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Also, please give us the URL/User/Pass of your website in the new thread using a Secure Note so we can see how you set things up in the team page so that we can give you proper suggestions.

Thank you for understanding and sorry again as you have to move this conversation to a new thread for the new question, I am sure you will understand.

#12

Thanks I do understand and realized that after I sent it! Will do it right now.
Grace

#13

You’re welcome! :slight_smile:

#14

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