Site logo

[Resolved] Several problems with sticky contact menu with Elements

Home Forums Support [Resolved] Several problems with sticky contact menu with Elements

Home Forums Support Several problems with sticky contact menu with Elements

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2555554
    Marcel

    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

    #2555705
    Ying
    Staff
    Customer Support

    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.

    #2556698
    Marcel

    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 🙂

    #2556812
    Fernando
    Customer Support

    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%);
    }
    #2557357
    Marcel

    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

    #2558082
    Fernando
    Customer Support

    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?

    #2558482
    Marcel

    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

    #2559447
    Fernando
    Customer Support

    You’re welcome, Marcel!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.