make Menu to stay at bottom of browser even if browser height is decreased or increased

Report · May 03, 2017

I have been trying to figure out a way to get the menu I created with a muse widget to stay at the bottom and center of the browser even if the browser's height decreases or increases so that visitors can scroll the page and still be able to access the menu at the bottom of the page no matter the height of the browser.

I have tried pinning the menu to the bottom of the browser, but when I preview it, I don't see it anywhere on the screen/browser.

I have tried pinning it to the top of the browser which displays in the correct position on my computer when the browser is at it's normal size, but as soon as I decrease the browser's height, the menu disappears.

I have tried pinning it to the page but that doesn't work.

Is there anyway to get the menu to do this?

I ask this question too, just in case I want to it to stay put on the bottom right or left of the browser if I ever wanted it to:

Is there anyway to also get an item/widget to do the at the bottom-right or bottom-left of the browser too?

I found this article online called "CSS Floating Menu" and I click the preview of the example that looked about what I wanted to do and it performed similar to what I would like my menu to perform.

Here is the link to the example they gave that stays in it's position no matter the width or height of the browser:

Example

Here is the link to the main article if you need it:

CSS Floating Menu

I need some M&M's to help me out. Master's of Muse or Muse Masters help me out.

Any attempt at helping me do this will be welcomed with open arms and will be muchly appreciated.

Report · May 03, 2017

Hi,

The code works in Muse as well, here's an example link I have created - Home

However, you need to alter the code as per your menu setup.

I the following code I just need to remove one <P> tag

Below is the code which I have placed in Muse through "insert HTML" option.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
body {
background-image: url('/pix/samples/bg1.gif');
}
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
bottom: 0px;
right: 0px;
}
.floating-menu a, 
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
</style>
</head>
<body>
<!-- HTML -->
<main>
<nav class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/database/">Database</a>
</nav>
</main>
</body>
</html>

Similarly you also need to alter the code according to your site layout.

Regards,

Ankush

Report · May 03, 2017

I can`t see the problem.

floating-menu

Does this help?

You can download directly from the browser.

Uwe

Report · May 03, 2017

Ankush, thank you for coming to my aid again. Thank you for your suggestion, but if you don't mind, I have a few more questions.

How would I go about altering the code so that it just affects the menu I created to be/float at the bottom of the browser and not affect the main menu I have at the top of the page that I don't mind that moves with the page.

Do I have to direct the code at the menu I want it to affect?

If yes, how do I go about directing that code at the menu I want it to affect?

Report · May 03, 2017

I do not understand why you need a code. This is done without code, standard means of pinning.

There is one important nuance that needs to be understood. You must use the bottom pinning. You must place the object at that distance from the lower boundary guide, on which you want it to be in the browser.

Even if your page inside the Muse has 10,000 pixels in height.

On mobile devices, this will not work. But on mobile it is not necessary in any case,

Report · May 04, 2017

Pavel, I am going to try to do what you said for the desktop version of my site.

Will this work on a fluid site?

I ask this question because I want the bottom menu very close to the bottom of the browser:

Do I have to check "footer" to make it a footer item in order to get it to be as low as I want it to be?

I would like to have this menu at the bottom of the browser/phone for my phone design too.

Also, do you think muse is ever going to make it so that it is possible to do this for a phone website design?

Report · May 04, 2017

Hi noelb8402969,

what was so bad with my example: floating-menu ? When you shrink the browser to mobile, why shouldn`t it work?

Uwe

Report · May 04, 2017

That is, what I ask myself too, Uwe!

Report · May 04, 2017

Fotoroeder, I clicked your example "floating-menu" and decreased the browser width to 320px and the little blue box moves with the browser and is in the same position, but do you think that will work when cellphone users access that design?

Also, I read that that you said the code can be downloaded from that page that you gave. If I click download, what will be downloaded?

I don't know CSS but I eventually hope to learn it, but I haven't yet because I have been trying to learn some html first, but that has been put off since I have been working on my site.

So, as for modifying code to make a menu, I'm not that knowledgeable yet.

Report · May 04, 2017

Will this work on a fluid site?

Yes.

Do I have to check "footer" to make it a footer item in order to get it to be as low as I want it to be?

No. As soon as you activate pinning, the function of the footer for this object will not be active. But this is not necessary. Place the menu, as you need.

Also, do you think muse is ever going to make it so that it is possible to do this for a phone website design?

Now this is a common web practice. Pinning on a mobile site is not worth using ...

what was so bad with my example: floating-menu ? When you shrink the browser to mobile, why shouldn`t it work?

...because this can lead to unpredictable consequences on mobile devices.

Report · May 04, 2017

Pavel, thank you for answering my followup questions. Thank you for showing me that the code has the possibility of not behaving in a predictable manner.

I'm going to try to do what you said to do after writing this message, I would have tried it earlier, right away, but I got busy doing some things.

I hope you have a very great day Pavel. I really appreciate all of your help and for you clearing things up for me.

Don't give up.

Report · May 04, 2017

Pavel, I just did what you said to do. .... It works. I feel like such a knuckle head for not realizing that I had actually place it at the bottom bottom line in muse where I want it to be positioned relative to the browser window.

After pinning it and making some other position changes and changes, I tried various browsers widths and heights and it seems to be functioning well. But I have tried it on a an actually cell phone so I don't know how it will perform on a phone, but I hope to test it on a cell phone soon...I'm hoping for the best. Even if it doesn't function on a cell phone well, I wanted to tell you thank you again for all your help and for helping me to get it to work on my other browser widths and heights. Thank You Pavel. : )

Report · May 04, 2017

You are welcome

Report · May 03, 2017

you may want to use a widget instead if this is for a phone design because they don't like pin and some codes don't work on every browser... anyway both 123muse and Responsive Muse have examples of float buttons and menus

Report · May 04, 2017

Thank you Ussnorway for telling me that. I will check 123muse and Responsive Muse to see what they have to offer. But even if they have something that will enable me to do this for the phone design, if it is too expensive, I won't be able to get it because I don't have a lot of money available right now. I am pretty much broke at this moment in time. But thanks be to Jesus Christ my Lord and Savior, despite my lack of finances, I can smile because of all the blessings God Almighty daily loads me with. I hope this statement doesn't anger you or anyone in any way, and I hope y'all will still continue to help me if I have anymore questions. I hope your day goes very well Ussnorway. Thank you for your suggestion.

Report · May 04, 2017

Ussnorway, I went to 123muse and they are merging with musegrid and I can't find any of their floating button or menu widgets.

I aslo went to Responsive Muse and looked through their site and I couldn't find any floating menu or button widgets.

But it's possible that I missed them since I'm human and capable of error.

Report · May 04, 2017

No CSS, no nothing, just download Uwe’s .muse example file, which shows you, how it works.

Report · May 04, 2017

Gunter, thank you for your input.

Is it going to show me a video or how is it going to show me how it works?

Report · May 04, 2017

As Pavel already mentioned, it will not work. I tried on my Fairphone/Android.

I suggest something like this: Steinmetzbetrieb Bernhard Binder-Steinmetzbetrieb Bernhard Binder, Restaurierung, Natursteinarbeiten... on the mobile you see, it is just in the footer but not floating.

Report · May 04, 2017

Thank you Fotoroeder for doing your best to help me. I appreciate it. Keep on keeping on. I hope you have a very great day. Thank you for sharing your thoughts and for the link for me to check out.

Report · May 04, 2017

And I already ordered a therapy because of inferiority feelings.

Report · May 04, 2017

Just to throw a wrench in here...

What usability study shows or says that placing the menu at the bottom is a good option for design?

Report · May 04, 2017

HMMB, I don't mind you throwing a wrench in here. The more thoughts, suggestions, and ideas, the better because with them, I can make better decisions. : )

I have a main menu placed at the top of every page, but 2 of my pages I wanted to place an extra menu at the bottom of them that gives visitors access to things that the main menu at the top doesn't it. As for whether or not people will like it or find it usable, I don't know, but if they don't like it or don't find it usable, I hope they will send me a message politely telling me so, and if that is the case, I will change its position.

Report · May 04, 2017

No! It gives you a .muse file!

Simply download it, double click it, and Muse will open the file.

Report · May 04, 2017

Thank you Gunter for telling me that. May the rest of your go well. : )

Adobe Community

make Menu to stay at bottom of browser even if browser height is decreased or increased

1 Correct answer