Small screen crisis

please see

https://forallthetime.com/style/index.html

on a small screen visit+ and explore+ are dark / black

i would like the code to make visit+ and explore+ the blue being used rather than the black

help me out?

many thanks!

Hi, there!

The reason they are black is because of the .toggle class on the labels.

many thanks!

did some work

i found this for visit+

<label for="drop-1" class="toggle">visit+</label>

and this for explore+

<label for="drop-2" class="toggle">Explore +</label>

sadly, lost from here :frowning:

am i in the right place?

kindly help me out?

again, thanks!

The toggle class overrides the background color you have set for the labels; it has higher specificity.

You’ll need to adjust the classes.

ok :slight_smile:
i am trying

so sorry if its there, but i saw no labels in my CSS… maybe tell me what line in the code?

dont follow :frowning:

what, specifically, do i adjust?

i was thinking, if i have the proper background color, i can move it to the bottom of the code for specificity, know what i mean? is that a good idea?

i am learning here… this code i got from codepen

kindly pass on the full code to solve my issue, please be clear :slight_smile:

and please pass on what you did so i can learn

i hope i am not bugging you

thanks for your time and trouble!!

thanks for helping me!

Ah, I understand better now. Using resources from CodePen can be useful, but if you do not know how it’s designed, you can run into problems when you try to change stuff.

After looking at the HTML and CSS, I really don’t like how this example was created. :sweat_smile:

I currently don’t have time today to take a look at it to adjust everything; however, what you can do at the moment is find the .toggle class in the CSS and remove the background.

image

There is also a .toggle:hover selector you can change as well. If you’d like, I can find some time this week to make the needed adjustments, but removing that background from the .toggle selector will do what you need.

wow!

fantastic!

thank you for being cool about this :slight_smile:

i am grateful for your time and advice

please, get everything i need at your next earliest convenience

YES PLEASE!!

thanks so much!

BINGO!!!

the code is where i want it for those samll screen links!

see Home

ok, another question for you…

the dropdown links are green, all of them

how can i code so the green is only on the active link AND the remaining links are blue?

thank you so much!

tell me…

do i owe you a $0.25 now?

At smaller screen sizes, there usually aren’t any included hover animations. I assume this is why whoever created this made them green. However, same as last time, you have to go in and change the background color.

Let’s see if you can figure this one out because you should be trying to learn these things as well.

Try inspecting the webpage and finding the CSS affecting the background color.

As a reminder, you can inspect the element by right-clicking it and then clicking inspect.

image

1 Like