[Support request] Mobile Menu Contact info

Home Forums Support [Support request] Mobile Menu Contact info

Home Forums Support Mobile Menu Contact info

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #681863
    Daniel

    Hi

    I build a website with your theme and made some custom chagnes in the header and in the mobile header see here

    http://wordpress-55262-534639.cloudwaysapps.com/

    On Desktop i put the menu under a main header which i set with hooks… works fine… on mobile i placed the menu sticky on top just with some css changes (it was also under the main header before)… i have the menu now left and a header bar… my question is can i put just an icon on the right in the menu bar with an onclick function so the contact info opens up in a small window… ot even better would be just css with a click… but i dont know where i can put the content and in? Here is the old page where its exactly like i want it to be (on mobile) http://ostermann.doctor/

    thanks for help

    GeneratePress 2.1.4
    #682368
    Tom
    Lead Developer
    Lead Developer

    Hey Daniel,

    You would need to implement some sort of javascript tooltip library on click. There are tons of them out there if you search for “jQuery tooltip”. Tooltipster is the only one I can think of off the top of my head.

    As for inserting the clickable item, it’s easier if you use the mobile header: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

    However, we can also make it work with the default mobile menu if needed.

    Let me know 🙂

    #693436
    Daniel

    ok at the moment it works fine with the default menu… so i guess it would be easier just to place the three dots like here in the regular menu http://ostermann.doctor/

    #693783
    Tom
    Lead Developer
    Lead Developer

    Ok, so in that case, you would:

    1. Activate the Elements module.
    2. Create a new Hook element.
    3. Add this content:

    <div class="mobile-bar-items">
        Your three dot code with tooltips integrated.
    </div>

    4. Set the inside_navigation hook.

    5. Set a Display Rule.

    #694298
    Daniel

    OK thanks… i installed the new elements … by the way great way to customize the header

    But after setting the hook up i nothing happens… for testing i just tried the text and copy pasted the code but the mobile bar is still the same like before?!

    #694362
    Leo
    Staff
    Customer Support

    Can you check if the display rule is set for the entire site?

    I’m not seeing the content showing up.

    #694375
    Daniel

    i set the display rule to entire site yes!

    #694615
    Tom
    Lead Developer
    Lead Developer

    That’s strange. Any chance you can send me temporary admin login details so I can take a closer look?: https://generatepress.com/contact

    Be sure to mention this topic.

    Let me know 🙂

    #695891
    Daniel

    i sent you the credentials

    thanks so much for the support

    #696466
    Tom
    Lead Developer
    Lead Developer

    Hi Daniel,

    Sorry about this – we were having issues with our Account Issue form.

    Can you send it again? All should be working now.

    Let me know 🙂

    #696551
    Tom
    Lead Developer
    Lead Developer

    So the HTML does exist within the main navigation.

    However, the mobile header is activated, so the main navigation isn’t displaying on mobile.

    To insert that code into the mobile header, you would use the inside_mobile_header hook.

    #731670
    Daniel

    Ok i think i manged it only with css… problem is it doesnt work on Iphones… i have no idea why.. i do know that is not a support issue but if you could take a quick look … this would be great…

    ostermann.doctor ist the domain and the html and css is

    <div class="mobile-bar-items ">
    	
     <li class="tipClick"><a href="#">
    				<img src="http://ostermann.doctor/wp-content/uploads/2018/10/dots-vertical-nav-more-512.png" />
    			</a>
    	 
    	 <div class="tooltipB">
    	 
    	 <a href="tel:+43-1-934 66 00"><i class="fa fa-phone" ></i> +43-1-934 66 00</a>
    								<a href="https://www.google.com/maps/place/J%C3%B6rgerstra%C3%9Fe%2B11%2B1170%2BWien"><i class="fa fa-map-marker"></i> Jörgerstraße 11, 1170 Wien</a>
    				<a href="mailto:ostermann@diepraxis-wien.at"> <i class="fa fa-envelope" ></i>  ostermann@diepraxis-wien.at</a> 
    	 
    	 </div>
    	</li>
    	 
    
    </div>

    /***** mobile contact info
    *****************************
    *******/

    .mobile-contactinfo {
    background-color: #3a3a3a;
    height: 41px;
    }

    .mobile-contactinfo img {
    height: 32px !important;
    }

    .tipClick{
    position:relative !important;
    display:inline-block;
    }

    .tipClick > .tooltipB {
    display:none;
    }
    .tipClick > a:focus + .tooltipB {
    display:block;
    }

    .tooltipB {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    color: black;
    float: right;
    position:absolute;
    right:1rem;
    top: 3rem;
    font-size:0.7em;
    width:280px;
    z-index:10;

    }

    .tooltipB a {
    font-size: 15px;
    line-height: 38px !important;
    }

    #732376
    Tom
    Lead Developer
    Lead Developer

    What about it isn’t working exactly?

    #732928
    Daniel

    on iphone nothing happens if you touch the three buttons… on all other phones it works and the pop up shows the contact info…

    thanks for help

    #733568
    Tom
    Lead Developer
    Lead Developer

    Is there somewhere I can see this? Your site doesn’t seem to be using the mobile header?

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