-
Posts
-
Hi Folks,
new year – new questions! :-)
By the way…happy new year to all of you! Hope you’re all fine!My first question this year is: how can I get an active button over the
fullscreen-slide-show? I know there is button-function within the slide-
show. But my customer wants a round button. And you have only
rectangulars buttons.I did find a solution for that problem a couple of months before. But this
only worked with one button. If I putted a second one into the layout the
button disappears on the frontend or show up at a wrong position.. ;-/
So what do/did I wrong? Please take a look at the screenshot °button-over-
image“ and the “two-buttons-shots“ and you’ll understand immediately!As on the left side I want the second button on the place of the circle within
the image…right side top. And in the mobile-view the button should been
above the slider…like in screenshot “button_mobile“.Hope my explanation is clearly enough. ;-) I’m looking forward to your first
answer in the new year. :-)Kind regards
CarstenHey Carsten,
Thanks for the screenshots. So you want the image which currently which appears on the left on your site now, to be on the right side as well? If so then please post admin WordPress login details in private so that we can have a closer look.
Best regards,
RikardHi Rikard,
thanks for your first reply in 2021 and sorry for my late! :-) Hope you got my answer
from our last last thread in 2020!
Happy new year to you!Back to my new question :-) Unfortunately my customer still can’t find an answer
on your question. ;-) So, we both have to wait a little bit longer…sorry for that!
I come back to you as soon as I can!Kind regards
CarstenHi Carsten,
Thanks for the update. We’ll leave this thread open for now then, please let us know if you should need any further help on this topic.
Best regards,
RikardHi Rikard,
sorry for the late reply, but this project is a little bit complicated. ;-/ ;-)
But now we can go on. But the focus changed also a little bit.I solved the button-problem by putting the button into the image and
made the whole image clickable. But unfortunately the image is not
completely clickable because the image protrudes into the header area,
as you can see.In the mobile-view I’ve got no problems because the image is completely
under the header-area. So, how can I get the image also completely
clickable in the desktop-view?Again…sorry for the late reply and I’m looking forward to your new answer!
PS: Sorry, but my customer was upset about the situation and asked me to
include a temporary alternative solution. Therefore, I have currently set the
header back to “non-transparent”. I wanted to share this with you so that they
are not surprised that the elements have changed somewhat. However, the
question remains the same, as the header is to become transparent again.Kind regards
CarstenHi Carsten,
Thanks for the update, so the header has to be transparent for us to see the problem you are having? If so, then can you create a test page for us?
Best regards,
RikardHi Rikard,
thx for your new answer! Of course I can create a test page for you!
Why didn’t I think of that myself? ;-) Please take a look in the pc-box.Here you see the startpage like I want to have it. But as I has already
written the header-area is not clickable.The girl-image is only clickable
beneath the header-area. Hope you have a solution!Kind regards
CarstenHi Carsten,
Thanks for that. I tried changing the z-index value for both the header, and the slider. The image becomes clickable after that, but the header disappear behind the slider unfortunately. It might work better if you use a regular image element instead? We can try it for you, if you give us access to the site in private.
Edit; you would likely have to edit the image in question, and cut out all the unnecessary white parts.
Best regards,
RikardHi again Rikard,
thanks for your new reply and the informations!
No problem…I edited and changed the image already as you wanted.
But unfortunately the image has now a little border. Ok, I think this
has to do with or comes from the slider, right? I can change the slider
to a regular image element but maybe my customer want to use it in
the future. And what’ll I do then?Ok, for the moment let’s do it like you suggested. But then we have
another problem what you hopefully can solve. If we use an regular
image element the image isn’t any longer full width! But i think you
have an “quick css“ for it, haven’t you?So, back to you…
Kind regards
CarstenHi,
Thanks for that, it seems to work better now. Please try this in Quick CSS:
#header { z-index: 1; }Best regards,
RikardHi Rikard,
thanks for the new css-snippet. Now the image is completely clickable, nice!
But with the snippet we got a new problem! If you scroll down now the content
doesn’t disappear under the header-area, it scrolls over. Didn’t you see that?
Please look at the screenshot. Sorry, but because of that I have to switch off the
new snippet again. Here we need a different solution or an addition. The
snippet must have the addition that the header will be non-transparent after
beginning with scrolling.And, as I said, I need also a snippet to display the image in full-width. Sorry,
for the double-work!Kind regards
CarstenHi,
You can try this CSS instead to try to target the different header states:
#header { z-index: 1; } #header.header-scrolled { z-index: 501; }If that doesn’t work, then I don’t think we have a solution for your problem unfortunately.
Best regards,
RikardHi Rikard,
thx for your new snippets…fortunately they working! :)
At last it would be nice if you have another snippet to
make the image again full-width…as I wished. Hopefully
the wish is not to big. Thx in advance!Kind regards
CarstenHi again Rikard,
small supplement: unfortunatel, the last snippets do not work as desired after all. ;/
I think, I was a little too hasty with my joy. ;/ Please take a look at the new screenshots
and you can see the problem with the menu-field. After the first scroll the
problem disappears. But I’m not sure if the (dummy) customers understand that. ;/So, as you said already it seems that this solution isn’t the perfect way to solve the
problem…unfortunately. ;/ And there is really no chance to fix that? Maybe it is?Best regards
CarstenHi Carsten,
Sorry for the late reply. I can’t see the results as in the screenshot in private, it look like the second screenshot on my end, both when the header is transparent and solid. Did you manage to find a solution for that? If not, then please let us know how we can reproduce the problem.
Best regards,
RikardHi Rikard,
maybe my last entry was not completely, sorry. I’ve forgotten to say that I
removed your last new snippets again…sorry again! In the moment you
aren’t able to see the problem in live any longer. That was a MUST because
of my complicate customer. ;-/The only possibillity I see at the moment is to give you the login-data for the
backend and you check it out by your own in the late evening or night.
Please check out the PC-Box. Your testpage is named “Start-Test“ and it is
right at the top of the overview of “all-pages“ page. It would be very nice if
you’ll find a solution.And last but not least – please look also after a little snippet to make the image
full-width! Thanx a lot in advance!Best regards
CarstenHi Carsten,
Thanks for that. I tried changing the z-index of the header to 2. When it’s at the top, the burger menu is correct then, but the top of the image loses its link if that is the case. I can’t give you a solution which works in all states unfortunately, the best solution would be to set z-index to 2 for the header, and let the top of the girls head to not be clickable while the browser is scrolled all the way up.
Best regards,
RikardHi Rikard,
thx for your new reply and the infos! And of course for your support!
In the meantime I thought about an alternative solution for my customer
and think that I also found one. But of course I have to clear that first
with my customer. You’ll hear again from me soon. Until then…Best regards
Carsten
- You must be logged in to reply to this topic.