How do I modify the header layout for mobile view, The X

[marcoalvarez]

How do I modify the header layout for mobile view using X. I would like the navigation box to line up with the logo but it slips below?

[prakash_s]

Hello @marcoalvarez,

Thanks for writing to us.

Regretfully there is no option to customize the header layout for mobile but you can achieve it by using the custom CSS code. I would suggest you add this custom CSS code under Theme Option—>CSS to set the logo and navigation in the same line.

@media(max-width:978.98px){
a.x-brand.img {
width: 82%;
}
.x-btn-navbar {
margin-top: 20px;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps
Thanks

[marcoalvarez]

Interesting thanks, in the past these sort of questions were answered and help provided. I take it then that the help with CSS has been commercialised? If I use the pro theme would I be able to control the mobile layout?

[tristup]

Hi @marcoalvarez,

In the Pro you can customize the Header and can also use the elements available. In the custom Headers the Bar elements can be controlled in different breakpoints, as other elements.
I would suggest you upgrade to the Pro theme, please go through the process here: https://theme.co/docs/converting-from-x-to-pro and then go through the following article and video on Header Builder.

https://theme.co/docs/header-builder-overview

How to Set up Navigation | Themeco Docs

And then you can add the following Navigation element for the desktop:

1. Navigation Inline

And then you can add the following Navigation elements for smaller screen:

1. Navigation Dropdown
2. Navigation Modal
3. Navigation Off Canvas

And adjust the Navigation by using the Customize > Hide During Breakpoint option to show/hide in the specific screen size.

Thanks