Home Forums Porto Template Removing Features and Editing Elements

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 5 days, 17 hours ago. This post has been viewed 22 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10030698

    mihaystills
    Participant

    Hello, I am a beginner in coding and I need some help. How can I remove the shrink effect for the header. I also want to make the header smaller along with the contents like the button for instance. Could you point me where should I change the sizes for elements. You could give me an example such as the button. I tried changing the size in the theme.css file by adjusting the max width and height but I am pretty sure that’s not how it should be done.
    I am using Corporate 15 template.
    Thank you!


    #10030706

    Support2
    Keymaster

    Hello, thanks for your purchase.

    1) To remove the shrink effect from header please use this HTML code:

    <header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 0}">.............

    2) To reduce the header height add the class my-0 to the header logo wrapper:

    <div class="header-logo my-0">

    3) To change the button size inside the Revolution Slider you need change the values of data-padding, for example:

    <a class="tp-caption d-inline-flex align-items-center btn btn-primary font-weight-bold rounded"
    	href="#"
    	data-frames='[{"delay":3000,"speed":2000,"frame":"0","from":"y:50%;opacity:0;","to":"y:0;o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
    	data-x="['left','left','left','center']" data-hoffset="['145','145','0','0']"
    	data-y="center" data-voffset="['65','65','65','65']"
    	data-paddingtop="['10','10','10','15']"
    	data-paddingbottom="['10','10','10','15']"
    	data-paddingleft="['20','20','20','20']"
    	data-paddingright="['8','8','8','8']"
    	data-fontsize="['10','10','10','15']"
    	data-lineheight="['20','20','20','22']">GET STARTED NOW <i class="fas fa-arrow-right ml-4 pl-1 mr-2 text-4"></i></a>

    To change the size of a button outside of the Revolution Slider:

    <a href="#" class="d-inline-flex align-items-center btn btn-dark text-color-light font-weight-bold px-4 btn-py-2 text-1 rounded">VIEW OUR SERVICES <i class="fa fa-arrow-right ml-2 pl-1 text-3"></i></a>

    * You can change the class btn-py-xx and btn-px-xx. Possible values starts from btn-px-1 and btn-py-1 until btn-px-5 and btn-py-5. This will increase or decrease the padding of the button.
    * Also use the class text-xx to change the font size. Possible values starts from text-1 until text-15.

    If you want to add custom CSS or modify something on the template we recommend you use the “css/custom.css” instead of edit the “theme.css” file.

    We hope this helps!

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

    Kind Regards,

    Rodrigo.


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