Jorge Lopez Jorge Lopez - 1 month ago 9
CSS Question

Scroll to section on click (padding needed)

Im working on a site that scrolls to a specific section on click but im using a fixed navbar and the title of the section gets lost on click. How can i make the section appear in a specific place?
Example www.pangeaplustst.com

Answer

A Simple Solution here.. to avoid the Title going out of focus in your site.

Remove padding:75px 0; under .page-section.

Remove Section ID and give it to new Blank DIV inside it.

Create a new Blank DIV inside every section with its id and make it position:absolute, z-index:2, top:-150px, height:150px

Check the below code

<section class="page-section">

<div id="projects" style="
    height: 150px;
    z-index: 2;
    position: absolute;
    top: -150px;
"></div>

// Add the above div to every Section

    <div class="container">  
       <div class="section-title text-center">
            <!-- Title -->
            <h2 class="title">Projects</h2>
        </div> .......