Adventure Theme Pages list

[Manami Sato]

https://expedition-japan.com/

[Sonl Sinha]

Hi,

Given website URL isn’t clickable. Therefore we are unable to check the issue.

Regards,
Chris

[Manami Sato]

Hello, for the adventure theme, I would like to create a booking form just like the demo (https://sktperfectdemo.com/demos/adventure/booking/) however, I cannot find the template for this. Is there an option of a template? Or Likewise, how can I incorporate it into my site?

[Sonl Sinha]

Hi,

How to setup Book Your Adventure Form On Booking page? Follow these steps.

1. Go to Admin -> Contact
https://www.sktthemesdemo.net/documentation/skt-elementor-doc/assets/img/adventure-img6.jpg

2. Edit or add form fields, and copy contact form shortcode
https://www.sktthemesdemo.net/documentation/skt-elementor-doc/assets/img/adventure-img7.jpg
https://www.sktthemesdemo.net/documentation/skt-elementor-doc/assets/img/adventure-img8.jpg

3. Add form shrotcode in Booking page
https://www.sktthemesdemo.net/documentation/skt-elementor-doc/assets/img/adventure-img9.jpg

This is Book Your Adventure Contact Form 7 Shortcode.

<label>Name*
[text* your-name] </label>

<label>Email*
[email* your-email] </label>

<label>Phone Number*
[text* your-number] </label>

<label> Adventure Tour*
[select* your-tour "Mountain Climbing Tour" "Mountain Hiking Tour" "Mountain Biking Trip" "Wildlife Adventure" "Yatch Sailing Tour" "Polar Tour"] </label>

<label> Adventure Destination
[select your-destination "Aquatica" "Atlantis" "Colorado" "France" "Himalaya" "Maldives"] </label>

<label> Date of Tour
[date date-73] </label>

<label>Message (optional)
[textarea your-message] </label>

[submit "Submit"]

Regards,
Chris

[Manami Sato]

Thank you very much.

One other thing is that I am currently trying to put in my logo. However, when I do so, it changes the aspect ratio of my image. When I insert my png as the same size as the sample provided, it makes the image really small and provides too much border. I would like to keep the box as the same size, however reduce the border so that the image takes up more of the space. How can this be done?

[Manami Sato]

Sorry, Actually i figured that out but was wondering how I could do the Custom CSs to make the logo sit half way between the header bar and the top slide? Like an overlapping effect. Is this possible?

[Manami Sato]

This is my website URL (expedition-japan.com) and I would like to keep the logo the size and position it is now, but bring the header back to where it was flush with the other buttons, and then have the logo overlap the slider images

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.logo img { height: 130px; width: 130px;}
.logo { margin-bottom:-85px;}

Regards,
Chris

[Manami Sato]

Thank you so much! For the same page, is there a way to bring the slide text down so that it doesn’t overlap with the Logo now?
Thank you

[Sonl Sinha]

Hi,

Kindly use this CSS to fix text overlapping.

.nivo-caption { top:35%;}

Regards,
Chris

[Manami Sato]

Thank you very much! I am very satisfied with the changes!

The next issue I have is making it mobile and tablet friendly. The menu and such becomes giant and the logo will not match the size of the screen correctly… I would like the mobile and tablet versions to be more or less the same as the desktop format. How can this be done?

[Manami Sato]

Also additionally, is there a way to change the back header image for each individual tour instead of just one top back image for them all?

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.header { position:relative;}
.logo { max-width:110px;}
.logo img { margin-top:10px; margin-bottom:0;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
.logo { width:130px;}
.logo img { margin-top:10px;}
.nivo-caption.nivo-caption { top:32%;}
}

Regards,
Chris

[Manami Sato]

Unfortunately, that did not fix the issue. The proportions are still off and the seven sections that serve as buttons for each of the prefectures are still aligned vertically on mobile, while on the website they are horizontally on the desktop. I would also like them horizontal on the mobile Just like on the mobile

[Sonl Sinha]

Hi,

Okay, Can you send us the screenshot of your issues? Upload your screenshot on https://imgbb.com/ and paste the share url here.

Regards,
Chris

[Author]

Posts