Hi, I’d like the button in the navigation bar to not wrap on a tablet screen. Is that possible? I’m not sure how to setup the flex box settings to do this. Screenshot of text wrap:
Hi Erin,
Thank you for writing in, please add this to the button’s Element CSS area
$el.x-anchor .x-anchor-text-primary {
white-space: nowrap;
}
You might as well do some adjustments on your container because right now the one in the middle is taking more space than the other two on the side.
If you have a follow-up question, please provide us login credentials in a secure note so we can take a closer look.
Cheers!
Hi, great thank you! Yes I am having a big issue with the main navigation. Especially since you cannot preview the site in screens smaller than 480px. When I go onto my iphone 6s, the navigation does not work at all. I have wasted some time. I need help creating a nav that will be responsive on small screens. I’ve been working off the mobile preview and apparently that does not work. I will provide my login credentials so you can help me.
- I don’t understand how to make the box in the middle (the logo) take up less space so the boxes on left and right (icons in small screens) don’t get cut off.
Thank you so much for your help!!!
Hi there,
I think I have worked out the container flex space of the center image/logo. Set to no shrink it seems to help. Is there a way to make the image more responsive so it does not cut off the icons on left and right in mobile view? Please view only the home page nav at the moment. Or do I have to create a new container for showing only on mobile.
Also, is there a way to make the nav bar outer spacing responsive on different screensizes using the Calc() size setting? Or do I need to just make the elements have their own margin?
Hello Erin,
Please edit your header and click the logo image for the smaller screens. And then find the “Customize” tab in the image element settings. You will have to add this inline element css:
@media(max-width: 480px){
$el.x-image {
max-width: 180px;
}
}
This is to make sure that the logo image will have a maximum width in smaller screens. Feel free to change the value if necessary.
We would love to know if this has worked for you. Thank you.
Hi there,
No this did not work. It makes the logo look really small and weird in 480 px. So I changed the code: max width: 240px and that helped. I also had to change how the logo scales.
Thank you so much!!!
You’re welcome!
We’re glad we were able to help you out.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.