Inline navigation clipping menu images

Hi,

I have been trying to get an inline navigation element to properly scale with the screen size and I am having problems. I have the images set through appearance > menus. When viewed on tablet sized screen the images don’t scale, rather the edges get clipped off. I have added the menu as three separate inline navigation elements because this way they stack vertically on mobile where as a single element did not stack at all. Is there a way to get the row columns to stack vertically for tablet sized screens or to scale the menu images?

Cheers

Hey @alxhoff,

The issue the padding of your first column is big so when your down to the tablet view, it squeezes the element.

May I know why you chose the Navigation Inline element for this purpose? Is it because so you can turn those images into links? In that case, the best element to use is the Image element. Please see this tutorial. Just and play to follow if you find it a bit fast.

For complete details about the Image element, please see https://theme.co/apex/forum/t/elements-image/10229/1

And by the way, it would be helpful if you post the URL of the page and a screenshot of the issue next time so we won’t have to figure it out thereby reducing our response time which would be good for you and other users as well.

Hope that helps.

Hi @christian_y,

Thanks for the reply. I have removed the padding but the problem persists. I will try with images instead now and post back on how it goes.

Thanks for your help,

Alex

Worked a charm.

Thanks

You’re welcome! :slight_smile:

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