Home Forums Themes Support HelpDesk Which addons could have such a feature? to hide google map in an element

This topic contains 48 replies, has 2 voices, and was last updated by  Harry 1 week, 6 days ago.

Viewing 15 posts - 1 through 15 (of 49 total)
  • Author
    Posts
  • #20184

    Hi,

    Add exactly the same thing as the transparent header to display the map, etc.

    Need help to add google map in a menu to hide it
    As on the example here

    http://themelooks.us/demo/matroz/html/default/#contact

    Click on OUR LOCATION

    Which addons could have such a feature? to hide google map in an element like FAQ or Toggle or other?

    Thank you,

    #20225

    Hi,

    Please follow this video https://monosnap.com/file/2Lj9ELBEfkGIX9XXZ5YKcKIeDFHcL4# and add below code

    .vc_tta-accordion .vc_tta-panels .vc_tta-panel:first-child {
           min-height: 60px;
    }
    .vc_tta-accordion .vc_tta-panels .vc_tta-panel:first-child .vc_tta-panel-heading {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	border: none !important;
    	background-color: rgba(255,152,0,.8) !important;
    	border-radius: 0 !important;
    	box-shadow: none !important;
    	z-index: 999;
    	height: 60px;
    background: url('http://janstudio.net/helpdesk/wp-content/uploads/2016/07/page-head-bg.png') center top no-repeat;
    background-size: cover;
    }
    .vc_tta-accordion .vc_tta-panels .vc_tta-panel:first-child .vc_tta-panel-body {
    	border: none !important;
    	padding: 0 !important;
    }
    .vc_tta-accordion .vc_tta-panels .vc_tta-panel + .vc_tta-panel {display: none !important;}
    .wpb-js-composer .vc_tta.vc_general .vc_tta-panel-title {
    	text-align: center;
    	line-height: 60px !important;
    }
    .wpb-js-composer .vc_tta.vc_general .vc_tta-panel-title i {display: none; !important}
    .wpb_gmaps_widget .wpb_wrapper {
    	background-color: transparent !important;
    	padding: 0 !important;
    }
    .wpb-js-composer .vc_tta-color-grey.vc_tta-style-outline .vc_tta-panel .vc_tta-panel-title > a {
    	color: #EBEBEB;
    	padding: 0 !important;
    }

    and change http://janstudio.net/helpdesk/wp-content/uploads/2016/07/page-head-bg.png with your map image background

    Best regards

    #20238

    Hi,

    Thank you for the code, how to display my image in the center of the text?

    Attached image

    2) Do you have a solution for

    In order for the columns to have two distinct full-width backgrounds, the content of the latter must also be full?

    How to have exactly the same thing
    I add a row element then I enter a custom layout for your line 3/4 + 1/4

    In the 1/4 columns I add element Google map, and I would like to have a background on all width and height?

    Example here in “Our Story” https://avada.theme-fusion.com/music/meet-the-band/

    Google map element, in the 1/4 column with a distinct full width background example blue color

    The other element for example block of text in column 3/4 with a background of full width distinct example color yellow

    Several tests and it does not work

    Attachments:
    You must be logged in to view attached files.
    #20280

    Hi,

    Please follow this video http://take.ms/jtlwh

    Best regards

    #20294

    Hi,

    I replace your image by ours, but our image must be centered as the title?

    For this to work I need to replace a css code

    The video and for question 2?
    Reading in progress

    Thank you

    #20314

    Hi,

    For the issue 1, i can’t help you if i don’t see your site. Could you please send me the link.

    My IP is 116.111.26.153

    Thanks

    #20321
    This reply has been marked as private.
    #20330

    Hi,

    I can’t remove number in link when use accordion

    1. You have to create fake image background for button by use below css i give you in code

    .vc_tta-accordion .vc_tta-panels .vc_tta-panel:first-child .vc_tta-panel-heading {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	border: none !important;
    	background-color: rgba(255,152,0,.8) !important;
    	border-radius: 0 !important;
    	box-shadow: none !important;
    	z-index: 999;
    	height: 60px;
    background: url('http://janstudio.net/helpdesk/wp-content/uploads/2016/07/page-head-bg.png') center top no-repeat;
    background-size: cover;
    }

    and add more css

    .vc_tta-accordion .vc_tta-panels .vc_tta-panel.vc_active .vc_tta-panel-heading {
    background-image: none;
    }

    Please change background url to your image path and change setting of accordion like this screenshot close all section https://monosnap.com/file/lKETX3Gg2jViRzNGTFL70Z3gaFa9f4#

    2. I think it good, please uncheck in full height row if you have more content and add more padding left and right for the row

    Best regards

    #20337
    This reply has been marked as private.
    #20356

    Hi,

    1. This because your image so narrow so can’t fill the heading of map. Please download attach file or use below code

    .vc_tta-accordion .vc_tta-panels .vc_tta-panel:first-child .vc_tta-panel-heading {
    background-position: center center;
    }

    2. Sorry please add padding-left for left column and padding-right for right column.

    Best regards

    Attachments:
    You must be logged in to view attached files.
    #20370

    1) I give up
    2) not included, screenshot

    #20381

    Could you explain more? You mean you don’t use image background for button?

    #20404

    Hi,

    1) I mean that the background of the image for the button is still not displayed
    even after adding all the css?

    2) not included

    Thank you

    #20424

    Hi,

    It now i can’t access your site so can’t check the issue. Could you try with bigger image?

     

    Best regards

    #20439

    No answer for question 2

Viewing 15 posts - 1 through 15 (of 49 total)

You must be logged in to reply to this topic.