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 4 months, 2 weeks 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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #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.

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #20370

    1) I give up
    2) not included, screenshot

    #20381

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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #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

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #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.