Streaming live at 10am (PST)

Menu Icon and Back to Top Bottom

Hello everyone!

I’m in the process of building my first portfolio but now stuck at two problems.

The first problem is:

  • How to fix the position of my Back to Top button on every page? Now that I created it but I only see it when I scroll down to the bottom of the page.

The second problem is:

  • For some reasons I can’t change the color of the menu icon when it’s in the mobile version. I tried to change the color of it when “pressed”, but when I test it, it’s still 35B8BE the green color. :frowning: I tried many attempts on this one but found it super weird. Perhaps I’m doing something wrong…

Thanks in advance if anyone can help me out on these!

:pray:


Here is my site Read-Only: https://preview.webflow.com/preview/minyizhu?utm_medium=preview_link&utm_source=designer&utm_content=minyizhu&preview=a1be4f433dd5ee57247c1ae4235efb2f&mode=preview

@MY_z - can you describe your first issue more or provide a screenshot? I’m just not seeing the back to top button on any of your pages.

As for your second issue:

  1. Select this element: image
  2. Select the breakpoint you want to adjust it for (they cascade down, so if you adjust on tablet, it will adjust the two smaller sizes as well unless you specify on those sizes: image
  3. Change the background color of the menu button: image

That should do it.

Hi Sam, thanks for the reply. For the second problem, I actually tried the same method as you showed but unfortunately it didn’t work. I will share a gif. below so you can see what happens.

As for the first problem, I created the back to top button at the end of each project page.
For example, here

Would you be able to help me take a look again? @sam-g

Thanks!!

@MY_z - it looks like on your smaller breakpoints you may have overriding styles:

image

You can option click any blue highlighted style to reset it so it inherits the parent style / breakpoint. After clearing that on mobile landscape and portrait I get the following on tablet and below:

image

image

For your back to top I would move the element in the Navigator live as a child of the Body element like this:

image

Then set it to position fixed and apply a position that you like:

image

It will then always be fixed in that position as the user scrolls the page:

Is that what you are going for?

@sam-g Thanks so much Sam!!! I managed to fix the back to top button based on your suggestion. That’s great :slight_smile:

However unfortunately I still quite don’t understand what you mean in the menu button. Here’s what I tried to do based on your steps.

  1. I changed the button to “pressed” status
  2. Changed the background color to transparent first (to reset?) then to orange
  3. Back to present mode and clicked the button, showing the default blue first then orange

Could you elaborate a bit more about how to clear the default color please?

Thanks again and I appreciate your help!

@MY_z - what is your end goal? Do you want the background to change on press?

@sam-g I want to be able to change the default color to something else. I don’t like the blue but wanted to change it to a lighter grey color. But I’m frustrated to see that the default color blue doesn’t go away even though I added a new background color on press.

@MY_z - I think clearing up a few concepts may be helpful

Breakpoints - Screen sizes run on breakpoints, that is what you see at the top of the screen (desktop, tablet, phone) you can set different styles at different breakpoints, so lets say you want the button orange on tablet and blue on phone, you can do that by adjusting the style at each breakpoint. Otherwise as I previously stated the breakpoints cascade down, meaning that if you set a style on desktop it will apply to all smaller screen sizes unless you specify otherwise at another breakpoint.

States - What you showed in your last post was an element state. Elements can exist in different states, think of a link for example, it can be in one of four states: normal, hover, visited, active and you can apply styles to each of these states across different breakpoints. Not that you would, but you could apply a different hover color for links on every breakpoint (purple on desktop, blue on tablet, etc…)

To wrap up, I would recommend outlining what you want to have happen, if it’s one background color on all devices for all states, you would just set that on desktop (or tablet in this case since the element doesn’t become visible until that breakpoint) and that will cascade down to each breakpoint. So check all of your breakpoints for any overriding styles, by clicking through each breakpoint one by one and checking the bg color. You can do the same for states, if you want one bg color on all states, just set it in it’s normal state and it will apply to all (in most cases this is true, but browsers have some default styles for common elements like links that you may have to override).

Does that makes sense / help?

@sam-g I see. Thanks so much for clarifying all the concepts, Sam. I’m very new to web design and sometimes I feel that I might have not explained my question well enough! You’re absolutely right about what I want to do – to have one background color (when in press) on all devices for all states for the menu button (start appearing since tablet onwards…)

My problem, I think for now, is that I’m not able to find where to edit/clear this blue color
image

I checked all my breakpoints and its menu bg color but didn’t see any overriding styles. I built this website using a template initially. Even though I customized it everything, not sure if that’s the case why I can’t manage the change.

@MY_z - looks like you got it to me when I open up the site.

One thing to note, you still have redundant styles set on different breakpoints for the menu button, on tablet you have this:

image

Then on mobile landscape:

image

You can tell because the color property is blue.

Then on mobile portrait:

image

In this case both clipping and color have been set. You can reset this to inherit by clicking on the blue text and selecting reset or by command clicking (which is just a faster way to do the same thing):

image

@sam-g Sounds good, Sam! Now that I removed the redundant styles as you advised, how do I change the bg color to another color on pressed then? I think now the overriding color should be gone …