Help with Pro Header Styling & Responsiveness Please!

Hi, it’s the second time for me using the Pro Theme, and although it gives you more options to get the header design you’re after, I have to admit I find it confusing and difficult to use. I usually use your normal X Theme which is great, but for the website I’m currently doing, I need to use your Pro version, and even though I’ve read through your Header Introduction, I’m still confused as to what to do! I’m hoping you’ll be able to help me with the following:

  1. My header is made up of 3 bars, all of which I’ve set for it to be a ‘Sticky Bar’. The problem with this is, when you scroll down the screen, all 3 bars jump and the content moves and gets smaller and I have no idea how to stop it from doing this!

  2. When I view the site at the setting 481px-767px and click on the nav button, the menu appears to the right of the button. This would be ok if I didn’t have any sub categories, because when I hover over a sub category, the menu appears to the left of the main menu which is confusing! I’ve checked the settings and can’t see anywhere where I can change this. I’ve uploaded a screen grab of it for your reference.

I’ll put the URL in a secure note.

I’m also dreading having to do the responsive version of the header, as it wasn’t the easiest thing to do the first time round when I used Pro over a year ago - I’ve tried to avoid it ever since! Have you got an up to date resource that goes through how to do the responsive settings for the header?

Thanks!

Hello @core365,

Thanks for writing in!

It is highly recommend that you use correct elements built for the specific screen sizes. For best results, use only the navigation inline and navigation dropdown elements on bigger screens. Your your smaller or mobile screens, the navigation layered, navigation collapsed and navigation modal should always be used.

For the resolution of your issue, please remove the navigation dropdown and replace it with the navigation layered or navigation collapsed element instead.

Best Regards.

Hi, thanks for the info, I’ve now changed the navigation to the navigation layered when viewing on a mobile device.

  1. When viewing the site on the front end, sometimes when I scroll down the screen it looks like there’s a transition/animation effect on the header bars as they fall into place rather than just being already static on the page. Is there a setting somewhere that controls the transition effect for the header?
  2. Have you got an up to date resource that goes through how to do the responsive settings for the header?

Thanks!

Hey @core365,

  1. I checked your header and I don’t see an animation when scrolling down. Can you give us a screen recording of the issue?
  2. We don’t have a specific responsive tutorial for the Header but the key to building a responsive header is understanding Flexbox. Since the new Row and Column employ Flex box like the Bar and Container, our new tutorials available in Youtube channel might be useful. Please visit https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg. Giving a like or subscribing to our channel will help us know your interest for more tutorials.

Thanks.

Hi @christian_y,

Thanks for the link, I’ve watched the videos, but they don’t really explain much about what the Flex different settings are for and how to get your content responsive within the containers. I hope you can help me out with a couple of things please!

My header is made up of 3 bars. When it comes to viewing it on a mobile device, I’m having trouble with bars 1 and 2! I’ll upload screen grabs of these at the end.

1. Bar 1 - I’ve got 1 container and is in the centre of the row. Within the container I have 3 text boxes. When I view it on a mobile, the text stays the same size but aligns to the left instead of staying centred. I’ve tried a few different settings with the Self Flex on the container, but don’t know what I’m doing or how to achieve what I want! I’d like the text to get smaller when viewed on mobile devices and for it to all stay centred. I don’t know what ‘Flex Grow’, ‘Flex Shrink’ or ‘Flex Basis’ does!
2. Bar 2 - I’ve got 5 containers and when viewed on a mobile, none of the content in any container either gets smaller or goes onto the next line, it all just scrunches up and stays in 5 columns in the 1 row.
3. I’ve made the header sticky, but I’d like it to disappear off the screen when viewed on a mobile device, but I don’t know how to do this!

Thanks!

Hi @core365,

  1. and 2) Can be corrected with a better understanding of how Flexbox works, please see the links/tutorial below. The video is a bit outdated but it should help you understand how Flexbox works in the Header/Footer builder. it may take your time now, but it will save time in the long run.

Using Flexbox
Guide to Flexbox

  1. You need a separate bar for your mobile, you can utilize the Hide During Breakpoints feature to hide and show the Bars in the intended breakpoints.

You might need to have a separate one Bar as Sticky header, you cannot have multiple bars as sticky it will create that moving effect.

Thanks,

Hi, thanks for the info and tutorial video, I’ll take a look at that.

With regards to my header being made up of 3 bars, they all need to be sticky. I only did 3 bars because I couldn’t see how to add rows to the bar. If rows aren’t an option, can you let me know how I can replicate the header I have done using only 1 bar, as I don’t think it’s unreasonable or asking a lot to want the whole header to be sticky, as this is something I can do in your non Pro version X Theme.

Thanks

Hi @core365,

Yes maybe 3 sticky bars are acceptable on desktop, but it will take a large portion of the screen on mobile, right now it’s already taking 1/3 of the mobile screen while the 2nd bar is still not wrapping.

Ok let’s go back to your bars issue, Bar 1) You only set the container’s horizontal align to center, but not the text-align. Please inspect those text elements and set the text-align option to center. You can reduce the font-size of those text elements so they will fit on a narrow screen. Or add the custom CSS below on the Text Elements’ CSS area

@media (max-width: 767px) {
	$el.x-text {
		font-size: 0.8rem;
	}
}

Bar 2) Please inspect the bar and set the enable the child wrap option. Now with this wrapping enable you need to set the bar height to auto so that the bar will have the sufficient height when its content getting wrapped.


Thanks,

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