Header Layout/Header Styling/Mobile Responsiveness

Hello,

I would like to be able to center my navigation the way in the way that this site does. https://rankings.io/

I would also like to change the color of the navigation underline.

In addition, what do I need to do to ensure that all elements of my website are mobile responsive? On mobile, text is undersized and images are oversized.

Hi Nick,

Thanks for reaching out.

To center the navigation using the X theme would require customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

On the other hand, this layout can be done using Pro builder. In Pro, you can customize your header and footer based on the layout you wanted. I advised that you switch to Pro and here’s how you can do it. Please check it here.

The reason why your text is undersized on mobile because you are setting the text as em, I suggest that you set the text to px to maintain the sizes in the mobile.

Hope that helps.

Thank you.

Hello Marc,

Thank you for the reply. I’ll check out the pro builder. Am I able to change the text gloabally?

Where all p text is a certain number of pixels, h1 is a certain number, titles are a certain number, etc?

Also, is there any way to align the nav that does not require customization?

Hello Nick,

With your current navbar layout, it is best that you set the logo and navigation as stacked. Please go to X > Theme Options > Header > Logo and Navigation > Layout and select “Stacked”. This way, the logo, and the navigation will display at the center of the page stacked below each other.

The font size was handled by the Typography section in X > Theme Options > Typography. If you have enabled the font manage, it is best that you check out our documentation:

Best Regards.

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