Archived topic
Several problems with sticky contact menu with Elements
7 replies · Started by Marcel on March 4, 2023
I have created a sticky contact menu (like a sticky social menu)
- With one mouse click the text color changes from white to black forever, although I have set the text color normal and hover to white in Colors
- smooth-scroll goes beyond the target, a new click then goes to the right place
- I want the menu position fixed and right, both do not work. How do I bring the menu to the right side of the web page as it is still fixed
- When I move the mouse over a menu button (hover), I want the left side of the button to be expanded with a text (mail or phone). How can I do this ?
Page ist jrtechnology.ch
In elements is still a small error, if I have two buttons I can not enter a link on the 2nd. With a little trick I could still do it, by changing the order I could always enter the top link
Thank you for your help
Hi Marcel,
1. You have this CSS added which sets the link color to black after it's been visited:
https://www.screencast.com/t/FTN7RSCe2YX
2. It scrolls to the up arrow part, it runs normally to me.
3. You have this CSS, just change left to right.
.sticky-contact-buttons {
position: fixed;
left: 0;
top: 60%;
}
4. You can add the text to the button, then we need some CSS to hide the text. I can take another look when the text is added.
1. I completely forgot the CSS in the snippets, that was so that my title in the blog did not change to the color purple which looked terrible. I have in the CSS for the sticky-menu added "color :white" and now the text here is always white
2. By Mausklick must scroll to title contact, but goes to the end of the contact section and not to the beginning (try a 2.times mouse click, then it goes to the right place). If you also select contact in the menu, it should go to the same place, here it works (from menu smooth-scroll does not work, only works for buttons !?). What about you, does it go to the same place in both variants?
Maybe I need to reduce the scroll speed a bit, I have the CSS for it
3. This is so easy, which is why I did not think of it right away !?
4. I Added the text to the button.
Have already realsied some CSS with hover. Should work somehow with .sticky-contact-buttons and hover and hidden text (!?). Just I don't know how ?
Text should come when mouse is in zone of button (hover) and when mouse is away from button should not be displayed anymore.
On the website https://www.vonroll.com/de/ is a good example from which I was inspired
In any case, thank you already for the quick feedback received :-)
Hi Marcel,
1. Upon checking it seems to be working as expected now.
2. Can you move the id "Kontakt" to the Container Block instead of the Buttons Wrapper?
4. Remove the text from the Buttons and add this CSS through Appearance > Customize > Additional CSS:
a.gb-button.gb-button-bfcff8c2::before{
content: "Kontakt";
}
a.gb-button.gb-button-af72b766::before{
content: "Email";
}
a.gb-button.gb-button-af72b766::before, a.gb-button.gb-button-bfcff8c2::before {
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in;
opacity: 0;
height: 100%;
width: 100%;
background-color: #000;
z-index: 10000;
}
a.gb-button.gb-button-af72b766, a.gb-button.gb-button-bfcff8c2 {
position: relative;
z-index: 10002;
}
a.gb-button.gb-button-af72b766:hover::before, a.gb-button.gb-button-bfcff8c2:hover::before{
opacity: 1;
transform:translateX(-100%);
}
Thank you for the numerous feedbacks
1. I had to remove color:white because all my other links were displayed as white text with a white background
Question: is it possible to make only the text/symbols inside the buttons white without affecting everything outside?
2. it still doesn't work here, even if the anchors are all at the containers. This is always only at the first mouse click, then it works until the page is called again.
4. Good solution, have extended it a bit and works fine, thank you
1. It should be possible. Can you try adding this as well first?:
.gb-container.sticky-contact-buttons .gb-button:visited{
color: #fff;
}
2. It seems to be going to the right section for me now on first click. Can you try clearing the cache of your browser?
Thank you all for the support, The result is already impressive and it always amazes me what is possible with Generatepress
With the colors it doesn't quite work yet but the rest works fine and that is surely only a small matter now.
I think now it is still up to me and I do not want to take up your valuable time even more. But I will still start a few attempts and look on the Internet for a solution.
In any case, thanks for all the feedback and I look forward to continue developing for great websites with Generatepress, Generateblocks and wp-show-posts (I have licensed all).
Regards from Switzerland
You're welcome, Marcel!