• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Menu responsive width and height is grey out.

Explorer ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

Hello.

I have a website and I have a menu I used option fill by image each of the menu section and I am not using labels because the images already have them.

The problem is that when I am scaling by browser window the menu scales only by width and not by height. I checked the option resize in the menu but resize by width and height is grey out and i have only none, by width or stretch to browser width...

Can you help me to make my menu with images responsive by width and height?..

Thank you in advance.

Views

1.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 20, 2018 Feb 20, 2018

No, unfortunately you can’t. Menus only scale ih horizontal direction.

Besides that: A „Fill“ image in HTML never causes an element to scale proportionally, if it doesn’t by definition, like an image. If you fill a text container, it won’t scale automatically in both directions. This is the „essence“ of fills.

If you need a menu scaling scaling in width and height, you may simply place your images and assign a link to them.

Votes

Translate

Translate
LEGEND ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

No, unfortunately you can’t. Menus only scale ih horizontal direction.

Besides that: A „Fill“ image in HTML never causes an element to scale proportionally, if it doesn’t by definition, like an image. If you fill a text container, it won’t scale automatically in both directions. This is the „essence“ of fills.

If you need a menu scaling scaling in width and height, you may simply place your images and assign a link to them.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

Bad news. I worked very hard to make a menu, looks like I have to start from the beginning.

Well in that case I have some more questions:

First it it's gonna be just an images with Rectangle Frame Tool How I can change image to the different one when the mouse is rollover the image. With filling it works pretty but when it's gonna be an independent image how I can change this behaviour?

Also how I can change image of menu if I want to show the active part of the menu. When I am making a classical menu I need just to choose Active and then I can change the feeling but with rectangle frame tool it doesn't work...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 20, 2018 Feb 20, 2018

Copy link to clipboard

Copied

Don’t mix up different things: Muse builds websites and therefore has to export HTML at the end. And in HTML menus, images nad other elements are working in a way, which Muse can’t change. Muse is only a tool, which allows us, to build and arrange these elements in a non-coding way. Menus, for example contain text. This circumstance doesn’t really allow proportional scaling, because in this case the text would have to become smaller when the window size gets smaller. Not really desirable. Or do you really want the text size to shrink on smaller devices? I don’t think so.

Concerning images: Images can’t be changed state-wise. Muse doesn’t allow this, because HTML doesn’t allow this.

There are many other ways to achieve something like that:

  • You can „fill" a standard menu item with different images state-wise. But – as it is a menu – it will scale only in width and not in width and height, when the browser window is resized. Highest flexibility with text and image fills is available, when setting the menu type to „manual“.
  • Use an empty image container and assign fill images state-wise. (This works, because in HTML fills are considered as a „decoration“ and not as an image.)
  • Use a rectangle, and assign fill images state-wise. (You already did this).
  • The best and most flexible way: Use a „State“ button. The „magic“ of a state button:
    • Every element, you place into this button, changes its state, when you „touch“ the button with your mouse, even if the elements itselves aren’t „touched“ by your mouse pointer. This opens a variety of possibilities:
      • Place an image or text into the state button, which is set to „Opacity: 100% in one state and „Opacity: 0% in another state.
      • Place a second image into the button with the opposite settings. This will cause, that one element fades and the other one appears, when hovering over the button.
    • An important hint: Although a state button can only be set to scale in width, it will scale in width and height, it you place an equally sized image (or an empty image container) into it.

You see: There are many possibilities to achieve, what you are looking for. But you can’t circumvent the „laws of HTML“.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 22, 2018 Feb 22, 2018

Copy link to clipboard

Copied

LATEST

Thank you very much for your answer!

Well, I fixed the problem using the image frames and then just filling images frames in the same way as I did for the menu. The good point of image frames that they can be scaled.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines