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. I tried many attempts on this one but found it super weird. Perhaps I’m doing something wrong…
@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:
Select this element:
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:
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.
@MY_z - it looks like on your smaller breakpoints you may have overriding styles:
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:
@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).
@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
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:
Then on mobile landscape:
You can tell because the color property is blue.
Then on mobile portrait:
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):
@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 …
I tried many attempts on this one but found it super weird. Perhaps I’m doing something wrong…
