Make Header More Scaleable

How can I make the logo, the menu items more scaleable to fill the space for desktop and responsive.

http://dev.seaturtlere.com/blog/

I’d like it to take up more space on desktop in terms of padding and reduce gracefully on mobile.

I can’t seem to set a max margin and a min or set to 100% etc.

Hello @verobeachmarketing,

Thanks for writing in! :slight_smile:

You can achieve this by setting the margins/paddings by going to the Container of your header.

If the problem persists, can you share us your Wordpress URL/User/Pass in a Secure Note so we can take a closer look?

Thank you.

Everything is set to 0 so I would assume the menu items could flex. In my head I would want say the search item to have max-width:200px; and min-with:50px; etc. I don’t know how to accomplish this.

Hi There,

You also need to provide the popup authentication.

Thanks!

If it doesn’t let you in, I will need your IP address…

Hi there,

It’s properly scaling except for menu and texts since you have fixed root font sizes. It’s all set to 14px under Theme Options > Typography. Please change your font sizes for each device in order for it to scale (eg. XS, SM, and etc.). The use REM font size on your menu to make sure it respond to the root font size.

Thanks!

This worked great thank you. I removed the width contraints and uses margins instead.

Glad to hear we could be of help! :slight_smile:

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