Header sections above menu and the Forms

[William Pratt]

I want the sections above the menu sections to stay in view when scrolling down the page.

The ‘Make an Appointment’, ‘get a Free Quote’ and ‘Contact’ forms retain the details entered after the submission has been made. I want the details entered cleared after the message has been sent.

Thanks

[ThemeLooks Support Team]

Hi William,

Please follow the steps below.

## Update The style.css file:
1. Open style.css file in the editor.
2. Find The Comment 1.7. BACKGROUND COLORS
3. Add the css code below: (Screenshot: http://prntscr.com/hvdw5f)

    .bg--color-white {
        background-color: #fff;
    }

## Update The main.js file:
1. Open main.js file in the editor.
2. Find The Comment FORM AJAX
3. Add the js code below: (Screenshot: http://prntscr.com/hvdwle)

    $el.resetForm();
    if ( $fileInputStatus.length ) {
        $fileInputStatus.text('File Name');
    }

## Making Header Sticky:
1. Open index.html file in the editor.
2. Find The Comment Header Navbar Start
*. Remove and attribute data-trigger="sticky"

          <!-- Header Navbar Start -->
          <nav class="header--navbar navbar">

3. Find The Comment Header Section Start
*. Add an extra class bg--color-white and an attribute data-trigger="sticky"

          <!-- Header Section Start -->
          <header class="header--section bg--color-white" data-trigger="sticky">

Best Regards,
ThemeLooks Support Team

[William Pratt]

Regarding the Sticky Header.

Your amendment works, however, the contents of the page scrolling up is showing through the section containing the logo, ‘Make an Appointment’ button, phone number, email address, etc. I want the white background of this section to remain white.

Any ideas to fix it?

Finally, please supply the code to show a Google map in the allocated section on the contact.html page.

It is showing this prompt ‘Sorry! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.’

With my reasonable knowledge of HTML there is no ‘href’ attribute to Google map.

Thanks.

[ThemeLooks Support Team]

1. Please follow the steps carefully & use the provided CSS (that we have provided in our previous reply) to fix the issue.

2. To get google map in your website, you must have to use your own google map API. Please follow the steps below.

a. Open contact.html file.
b. Find the comment Google Map API
c. Update the API Key with your own api key. Screenshot as reference http://prntscr.com/hvtkvt (Here is a guide about How To Get A Key plus a Video Tutorial)

Please Note: the google map will not show until you have uploaded the template on your hosting server.

Best Regards,
ThemeLooks Support Team

[William Pratt]

Thank you for the prompt response ref REPLY 2903.

I have checked the amendments as instructed in reply 2899.the same problem with the ‘Sticky Header’ as described in REPLY 2900 has not changed.

There is no file attachment facility on this support page to use to send the files for you to check.

The amendment is on the index.html only, and the associated CSS and .js files have been updated as instructed.

Please advise how I can send the files to your team to check. If you do find errors, I apologize in advance for the errors and wasting your time.

Regards,

William

[ThemeLooks Support Team]

In this issue, please upload the files on your server for test purpose and provide us the URL. After then, we will review the issue and provide you a solution to fix the issue.

Moreover, you have to do the below steps for all of the HTML files not only for index.html.

## Making Header Sticky:
1. Open all .html file in the editor.
2. Find The Comment Header Navbar Start
*. Remove and attribute data-trigger="sticky"

          <!-- Header Navbar Start -->
          <nav class="header--navbar navbar">

3. Find The Comment Header Section Start
*. Add an extra class bg--color-white and an attribute data-trigger="sticky"

          <!-- Header Section Start -->
          <header class="header--section bg--color-white" data-trigger="sticky">

Furthermore, you could use any screenshot application to provide a screenshot.

Thanks for your understanding.

Best Regards,
ThemeLooks Support Team

[William Pratt]

I don’t have a server to upload the files for test purpose, the client is not willing to give access to his server while his current website is live online.

I am aware that the changes must be applied to the pages that will make the website. I will not be using all of the pages that make up the template. My understanding is that CSS is not a server-side scripting language, therefore a server is not required to see a page displayed properly on a local machine.

I have a screenshot of how the page appears when scrolling down the page, however, this support page doesn’t have a file attachment facility.

What I will do is to accept the default behaviour on the template as provided and continue adding the text and image content supplied by the client.

Regards,

William

[William Pratt]

Hi ThemeLooks,

Firstly, I hope I can still post additional enquires on this thread for the Quickfix HTML template not relating to the previous posts regarding the ‘Header sections above menu and the Forms’.

I want to change the default orange colour/color of the icons used in the ‘Make an Appointment’ section and elsewhere on the template. Where can I download or access the vector source files for me to change the colour/color and save the files as a .png file?

The date picker on the ‘Make an Appointment’ form uses the American format mm/dd/yy, I require the UK format dd/mm/yy. Where and how do I change the format?

I am just curious to know why the video on the ‘Testimonial’ section doesn’t run when clicked on a local machine (not a server) given that the coding shows an absolute path (https://www.youtube.com/watch?v=2GqExKSwTEA) direct to the video on YouTube. The popup window appears but no video appears.

Kind regards,

William.

[ThemeLooks Support Team]

As we have said, you have to do the below steps for all of the HTML files (not only for index.html) to get the header like as you are looking for. So, do the below steps for all of the HTML files that you want to use.

(i). Making Header Sticky:
1. Open all .html file in the editor.
2. Find The Comment Header Navbar Start
*. Remove and attribute data-trigger="sticky"

          <!-- Header Navbar Start -->
          <nav class="header--navbar navbar">

3. Find The Comment Header Section Start
*. Add an extra class bg--color-white and an attribute data-trigger="sticky"

          <!-- Header Section Start -->
          <header class="header--section bg--color-white" data-trigger="sticky">

(ii). There is no vector source files available for the icons. In this issue, you have to work with the .png files to change the color.

(iii). Date Picker on the ‘Make an Appointment’
1. Open main.js file in the editor
2. Find the comment * DATE
3. Add below js code like in the screenshot: http://prntscr.com/hwpnxm
dateFormat: 'dd/mm/yy'

(iv). The ‘Testimonial’ section’s video will not work until you upload the template on an online server.

Moreover, you could use this https://app.prntscr.com/en/download.html screenshot application to capture and provide us a screenshot.

Furthermore, please learn more our support policy (item support includes & not includes), here https://www.themelooks.com/support/support-policy/ before post a topic or ask for support.

Best Regards,
ThemeLooks Support Team

[Author]

Posts