Menu items not staying where I put them

[Thrill Media]

Hey,

I am trying to figure out what I am missing here... it seems I always get stuck on this, setting up the master menu. Duh, you'd think.

Master with breakpoints 1366, 960, 640

All menu items are aligned to top at 10 with margins at 10.

When I publish, the buttons are at varying heights, not all even at 10. None of the buttons should be touching the "white edge" on the bottom of the menu.

The logo on the left disappears on some breakpoints when scaling the browser, (should always be seen). The guitar on the right should also always be seen except at 640 breakpoint where it's hidden.

Anyone mind assisting my simple self?

Thanks!

www.testr2r.businesscatalyst.com/index.html

[Günter Heißenbüttel]

This is a scaling issue, perhaps simple, perhaps difficult to solve.

Coud you please share this .muse file (only one page, only the elements shown on your test site) with us, using Dropbox, CC Files or a similar service. Please follow these instructions: https://forums.adobe.com/docs/DOC-8652

[Thrill Media]

Hey Günter,

I don't doubt it, just not sure why I can't get it right. I only build a site or two a year so it's not my main service. It should be pretty simple.

Here's the link: R2Rsite - Google Drive

Thanks for any insight you can provide. I appreciate it.

Curtis

[Günter Heißenbüttel · Accepted solution]

Hello Curtis!

As I feared, the menu layout, you have chosen, unfortunately can’t work seamlessly for a couple of „logical“ reasons:

You are using a system font („Redgar“). System fonts have to be converted to an image during output. Why? Just read my answer #4 here: https://forums.adobe.com/thread/2357163

Converting fonts to an image causes a different scaling behaviour:

• Text boxes only scale horizontally, but grow vertically to be able to keep the text within the container, if the browser window is reduced.
• Images scale proportionally, what means they grow/shrink in height and width, when scaling the browser window.

If you want to use the font „Redgar“ you have to install the web font version, with all its necessary files. I provided these files for you under the link, mentioned later on in this thread.

But using a font for this kind of menu causes problems:

As already said, the font containers grow vertically to keep the text visible, when the browser window is reduced.

The image behind the menu is an image and therefore necessarily scales proportionally.

This causes a unsolvable contradiction:

You want the menu item to stay within the image area, but both elements need to scale/grow/shrink differently. What at the end means: It is not possible.

The next variant:

Use the menu text as an image – preferably as a vector image in SVG format. This would work, but evidently the „text (= image)“ scales down, when reducing the browser window, and normally it is not desired, that text shrinks, when the browser window shrinks. You may use breakpoints to adjust and moderate this behaviour, but …

You may say: „But you told me that my font will be converted to an image, since it is a system font!“ Correct, but it is hard to control, since it doesn’t react as an image in design mode. So it would be the better choice to create these images in Illustrator, instead of leaving the conversion to Muse. Moreover, Muse will automatically create a pixel PNG, what necessarily causes a loss of sharpness.

My recommendation:

Don’t use this background image for the menu, use a simple white bordered rectangle instead. This will scale according to the elements, which are placed inside.

In the linked file you will find a simple .muse file, showing the different possibilities (menu as text, as image, background image, background rectangle) with all its pros and cons. Additionally I provided the required web font files for „Redgar“. The installation of web fonts is described here: https://helpx.adobe.com/muse/how-to/add-self-hosted-web-fonts.html​  (I’d suggest, before installing the web font, to deinstall the already existent „Redgar“.)

Here the sample file, I talked about:

https://www.dropbox.com/s/g0v5n4uaoi0rhux/webfontkit-20180104-100629.zip?dl=0​

• The first example: menu as an image. Here you may find an empty image container sitting vertically over the menu boxes and grouped with them, in order to guide the scaling of these elements. Otherwise the menu boxes and the background will slightly loose their synchronous scaling behaviour.
• The second example: Menu as text, but optimized
• The third example: Your menu construction
• The fourth example: text menu with a rectangle as background.

Pooh, these explanations seem to be quite complicated, because two (or more) problems are coming together and influence each other.

Hope, this helps anyway. If you have further questions – just ask!

[Thrill Media]

Thanks so much! I knew the font would be converted to a rasterized image but was not aware that it would cause such behavior issues.

I didn't see the four examples in your zip file but I guess if I create the buttons in PS and place as button that would solve the discrepancies?

Thanks again for helping! I really appreciate it.

[Thrill Media]

Hey Günter,

With your help, I was able to get the header working properly... thanks so much.

Now I am having problems with the footer. Everything works as expected on a desktop, but on my phone (Pixel XL and wife's iPhone 7) the footer extends off of the website. On mine, I can set it to desktop mode and it works fine but not in normal mode.

Any more ideas?

Thanks,

Curtis

Home

[Thrill Media]

FYI... I made the text boxes in PS and placed them in the footer and it works properly now.

Thanks!
C

[Günter Heißenbüttel]

Fine! If you want us to have a look at the „non working version“ of the footer: share a small sample .muse file with us.