X Pro Theme: Making Header Fully Responsive

[keepinventive]

Hi there,

I have my header pretty much how I want it, however it is not that responsive. When I shrink the screen size, menu items start to overlap each other and the menu text splits up into two lines but I would really like to keep the text always on one line instead. The mobile ‘navigation collapsed’ menu also starts to disappear the smaller the screen goes, almost like the container starts covering it. Is there away to fix these issues?

Also is there a way I can set just use an icon for a menu item instead of an icon and text.

Thanks heaps for your help!

Matt

[nabeel]

Hi Matt,

Thank you for reaching out to us. This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space. The following should be considered in these situations:

1. Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, size down your logo.
2. Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
3. Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
4. Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
5. Appearance – fortunately Pro features plenty of options for adjusting the appearance of elements throughout your site Try using a smaller font size if possible to save on a little real estate.

Since you’re using Pro you can use hide/show feature to manage your menu items in different bars, for this you can follow this thread: Coding "change color bullet points"

Hope this helps!

[keepinventive]

Hi Nabeel,

Thanks for your response. Even with shorter names it doesn’t make a difference as you can see in the image attached on the left hand menu each box starts overlapping each other and you can see the text on 2 lines.

Also is there a way I can set just use an icon for a menu item instead of an icon and text. For the My Account and Cart menu item I would just like to use the icons with no text.

Thanks heaps,
Matt

[christian]

Hey Matt,

I see that you have changed the left menu with a mobile one using the Hide During Breakpoints feature. You should do the same with the right menu but instead of displaying a mobile menu, display Button elements. That’s also because you can’t change specific menu items to use icon only.

Hope that helps.

[keepinventive]

Hi there,

Thanks I have adjusted the menu items to be button graphic icons and they work really well! However I still haven’t received any advise in regards to my main header overlap issues. Please take a look at the attached video to see the issue in action.

Header Menu.mp4 (video)

Matt

[christian]

Hey Matt,

I didn’t take that into account previously as I saw the menu changes to the mobile menu on smaller screens already so I thought you understood what Nabeel said about changing things per screen size.

As you can see in your screenshot, there is not much you can do with your menu other than to start or show the mobile nav and the buttons earlier using the Hide During Breakpoints feature.

I didn’t recommend making your text responsive because if you make the text responsive, you will need to make the text really small for them to still show up on a small tablet screen. Take a look at the following screenshot for example. It fits but I believe you won’t be able to read it.

But, if you want to try it, please watch the videos about Responsive Text below.

• https://www.youtube.com/watch?v=UXPhObp296c
• https://www.youtube.com/watch?v=_ia5Lswi3ak

In the smallest screen like in the screenshot below, hide the mobile nav and buttons beside the logo and maybe show them below the logo by duplicating them and moving the copies to a new bar that will show only on small screens.

If you remove all spaces surrounding the menu items, you can make the text bigger and stay in one line but I believe you won’t like the look of the following screenshot either.

If you don’t like any approach that we’ve mentioned here so far, please give us a design mockup of how the elements should display per pre-configured breakpoints of our builders.

Thanks.

[keepinventive]

Hi there,

If I could get the header to look like the top half of the image attached I would be happy. Then I can make the menu hide during breakpoints earlier and adjust the mobile menu to work.

Can you please advise me what changes I need to do to make my header look like the image.

Thanks.
Matt

[christian]

Hey Matt,

That’s possible but I’d recommend that you make the menus close to your logo first by ensuring that the navigation elements are not filling the space of the container and that the container aligns its content according to the proximity to the logo. That mostly can be achieved by setting the flex options inside the elements so I’d strongly recommend learning how to use the Flex Layout.

I’d provide some specific guidance but it would be best that you know how to tweak the settings yourself in the future. Please watch the video below.

And, just in case you need different spacing on desktop and smaller screens, watch the video below.

Hope that helps.

[keepinventive]

Hi Christian,

Thanks for the videos and information! I will take a look and let you know how I go.

Kind regards,
Matt

[lely]

You’re always welcome Matt.

Please watch and subrcribe to our youtube channel for more how to videos.

[keepinventive]

Hi guys,

Watching the videos helped a lot and my header is pretty much finished now. My only last to issues with the header is the responsiveness. Please see the images below:

As you cans see the icons are still getting cut off as the screen size shrinks and menu and icons are extending the width of the header into the content below.

Kind regards,
Matt

[jade]

Hello Matt,

Firstly, try setting the height of the bar that contains the mobile elements to 119 instead of 120px.

Then as for the containers of the mobile items’ flex basis to auto:

In case you are still getting issues, please provide us with the admin access to your site in a Secure Note:

Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

[keepinventive]

Hi Jade,

Thanks for your response! I tried those settings and they didn’t work unfortunately. Now my logo is shrinking right down and nothing looks centered.

Kind regards,

Matt

[lely]

Hi Matt,

For the menu and icons extending issue, please inspect Mobile Menu Burger and Mobile Menu Icon container. Remove white background for both container.

For the logo size issue, please inspect all those container, set the correct FLEX BASIS value:

Choose Custom for Self Flex, on the FLEX BASIS try the following:
20% for mobile button container
50% for logo container
30% for icons containerr.

Adjust accordingly to your preferred logo size.
If this will affect your desktop view, try to use HIDE BASED DURING BREAKPOINTS to handle it.

Hope this helps.

[keepinventive]

Hi there,

Finally got it all sorted! Thank you for all your help and patience!

Kind regards,
Matt

[christopher]

You’re welcome