Side Panel

This topic has 9 replies, 2 voices, and was last updated 6 years, 1 month ago by Support. This post has been viewed 1255 times

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts

August 20, 2020 at 8:08 am #10034205

Participant

I am trying to add the side panel to my project as a contact form. When i add the code copied from https://portotheme.com/html/porto/8.0.0/feature-side-panel.html the side panel appears as active not hidden. Do i need to add it to a specific div? please assist

August 20, 2020 at 10:06 pm #10034209

Support

Keymaster

Hello,

Check if your <html> tag is starting with the class side-panel-open. If yes, remove this class and the side panel will start correctly. This is the class that control side panel for open/close.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

August 20, 2020 at 11:45 pm #10034212

Tsokotsa-mz

Participant

the html tag doesnt contain that class. See bellow the code that i have copied which is not working.
is there any css specific that is required or js?

<div class="side-panel-wrapper">
    <button class="hamburguer-btn side-panel-close side-panel-toggle active" data-set-active="false">
        <span class="close">
            <span></span>
            <span></span>
        </span>
    </button>
    <aside class="sidebar">				
        <h5 class="font-weight-bold">Contact <strong>Us</strong></h5>				
        <p>Contact us or give us a call to discover how we can help.</p>				
        <form class="contact-form" action="php/contact-form.php" method="POST">					
            <div class="contact-form-success alert alert-success d-none mt-4">						
                <strong>Success!</strong> Your message has been sent to us.					
            </div>					
            <div class="contact-form-error alert alert-danger d-none mt-4">						
                <strong>Error!</strong> There was an error sending your message.						
                <span class="mail-error-message text-1 d-block"></span>					
            </div>					
            <div class="form-row">						
                <div class="form-group col">							
                    <label class="required font-weight-bold text-dark text-1 mb-0">Full Name</label>							
                    <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" required>						
                </div>					
            </div>					
            <div class="form-row">						
                <div class="form-group col">							
                    <label class="required font-weight-bold text-dark text-1 mb-0">Email Address</label>							
                    <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" required>						
                </div>					
            </div>					
            <div class="form-row">						
                <div class="form-group col">							
                    <label class="required font-weight-bold text-dark text-1 mb-0">Message</label>							
                    <textarea maxlength="5000" data-msg-required="Please enter your message." rows="8" class="form-control" name="message" required></textarea>						
                </div>					
            </div>					
            <div class="form-row mb-3 pb-1">						
                <div class="form-group col">							
                    <input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">						
                </div>					
            </div>				
        </form>				
        <h5 class="font-weight-bold pt-4">Our <strong>Office</strong></h5>				
        <ul class="list list-icons list-icons-style-2 mt-2">					
            <li><i class="fas fa-map-marker-alt top-6"></i> <strong class="text-dark">Address:</strong> 1234 Street Name, City Name, United States</li>					
            <li><i class="fas fa-phone top-6"></i> <strong class="text-dark">Phone:</strong> (123) 456-789</li>					
            <li><i class="fas fa-envelope top-6"></i> <strong class="text-dark">Email:</strong> <a href="mailto:[email protected]">[email protected]</a></li>				
        </ul>			
    </aside>
</div>

August 21, 2020 at 5:39 am #10034216

Support

Keymaster

Hello,

Thanks for the code.

First make sure you are adding this HTML after the <div role="main".....:

..
....
......
<div role="main" class="main sticky-container">
	<div class="side-panel-wrapper">
...
....
......

Add the class side-panel in the html tag:

<html class="side-panel">

Don’t forget you should use one of the example buttons from feature-side-panel.html to trigger/open the side panel.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

August 21, 2020 at 9:54 pm #10034221

Tsokotsa-mz

Participant

thank you for your reply.
You solution worked, i was missing the class=”side-panel” on the HTML tag. However, i am now facing a new issue, the button copied from feature-side-panel.html is not triggering the panel.
See my button below:
<a href="#">OPEN SIDE PANEL</a>

and my panel code:

<div class="side-panel-wrapper">
            <button class="hamburguer-btn side-panel-close side-panel-toggle active" data-set-active="false">
                <span class="close">
                    <span></span>
                    <span></span>
                </span>
            </button>
            <aside class="sidebar">				
                <h5 class="font-weight-bold">Contact <strong>Us</strong></h5>				
                <p>Contact us or give us a call to discover how we can help.</p>				
                <form class="contact-form" action="php/contact-form.php" method="POST">					
                    <div class="contact-form-success alert alert-success d-none mt-4">						
                        <strong>Success!</strong> Your message has been sent to us.					
                    </div>					
                    <div class="contact-form-error alert alert-danger d-none mt-4">						
                        <strong>Error!</strong> There was an error sending your message.						
                        <span class="mail-error-message text-1 d-block"></span>					
                    </div>					
                    <div class="form-row">						
                        <div class="form-group col">							
                            <label class="required font-weight-bold text-dark text-1 mb-0">Full Name</label>							
                            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" required>						
                        </div>					
                    </div>					
                    <div class="form-row">						
                        <div class="form-group col">							
                            <label class="required font-weight-bold text-dark text-1 mb-0">Email Address</label>							
                            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" required>						
                        </div>					
                    </div>					
                    <div class="form-row">						
                        <div class="form-group col">							
                            <label class="required font-weight-bold text-dark text-1 mb-0">Message</label>							
                            <textarea maxlength="5000" data-msg-required="Please enter your message." rows="8" class="form-control" name="message" required></textarea>						
                        </div>					
                    </div>					
                    <div class="form-row mb-3 pb-1">						
                        <div class="form-group col">							
                            <input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">						
                        </div>					
                    </div>				
                </form>				
                <h5 class="font-weight-bold pt-4">Our <strong>Office</strong></h5>				
                <ul class="list list-icons list-icons-style-2 mt-2">					
                    <li><i class="fas fa-map-marker-alt top-6"></i> <strong class="text-dark">Address:</strong> 1234 Street Name, City Name, United States</li>					
                    <li><i class="fas fa-phone top-6"></i> <strong class="text-dark">Phone:</strong> (123) 456-789</li>					
                    <li><i class="fas fa-envelope top-6"></i> <strong class="text-dark">Email:</strong> <a href="mailto:[email protected]">[email protected]</a></li>				
                </ul>			
            </aside>
        </div>

August 21, 2020 at 10:12 pm #10034224

Support

Keymaster

Hello,

Great!

It’s missing the class side-panel-toggle in the link:

<a href="#" class="side-panel-toggle">OPEN SIDE PANEL</a>

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

August 21, 2020 at 11:11 pm #10034226

Tsokotsa-mz

Participant

the class is there maybe was omitted on the chat. OPEN SIDE PANEL

not sure if it will omitted again but i have the class btn btn-primary btn-rounded side-panel-toggle text-1 font-weight-semibold px-4 mb-3 mb-md-0

and it is not working.

August 22, 2020 at 12:29 am #10034227

Support

Keymaster

Hello,

Oh right.

To send codes here you can wrap the code inside a <pre>code here</pre> tag.

I did a test here with the button you mentioned and it’s working. Maybe you are having some javascript error breaking the execution. On this case we need inspect your code/website to discover where’s the issue. Please send us a online test link with your website, so we can check it.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

August 22, 2020 at 3:02 am #10034230

Tsokotsa-mz

Participant

This reply has been marked as private.

August 22, 2020 at 3:10 am #10034231

Support

Keymaster

Hello,

Thanks for the link.

The issue is that data-hash below in the /galeria item:

Remove these data-hash attributes and should works. The data-hash should be used only at items with hred="#xxxxx".

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

This topic is marked as "RESOLVED" and can not rceive new replies.

Support Center

My Account

Side Panel

Company

Support

Subscribe to Our Newsletter