Question 422034 in Html Question posted in
Some basic documentation can be found here.

Html – Aligning the Site Content with the NavBar

I am trying to design a portfolio website using HTML/CSS and JS. I am done with the animations, switching to a navigation bar, and the website’s general design. When I wanted to add some content to my website as text, I saw that the div with the website content expanded to the top of the webpage and went through the navbar.

How I want it to behave is that the div will always start aligned centered and below the navbar itself. I know I have to do something with the relative positioning, but I am unsure how. At the same time, my div should expand down as much as needed so that I can scroll through the website. While trying to fix this, the div became scrollable rather than covering the whole page and making it scrollable.

This is my current code:
https://codepen.io/dderingezgin/pen/LEPBNLj?editors=1000

This might be the specific problematic part

.sub-section {
            display: none;
            position: relative;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            background-color: transparent;
            color: inherit;
            padding: 2rem;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid currentColor;
            opacity: 0;
        }

.sub-section.active {
            display: block;
            animation: fade-in 0.8s ease forwards;
        }

I tried to make the div scrollable –> It ‘literally’ made the div scrollable not expand it.
I tried to make the div go behind the nav-bar –> it literally went behind it, but not completely scrollable.

Tags:

2

Answers


  1. 0 
    /* Ensure the navbar has a fixed height */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Adjust this based on your navbar height */
    background-color: #333;
    color: white;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjust the .sub-section to start below the navbar */
.sub-section {
    display: none;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 60px; /* Same height as the navbar */
    width: 80%;
    background-color: transparent;
    color: inherit;
    padding: 2rem;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid currentColor;
    opacity: 0;
    min-height: 100vh; /* Ensures it takes at least the full viewport height */
}

.sub-section.active {
    display: block;
    animation: fade-in 0.8s ease forwards;
}

/* Make sure body content is scrollable */
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}
    Login or Signup to reply.
  2. 0

    I hope this help you

    open in full page and change screen size to scroll

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Website</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');

        body {
            margin: 0; padding: 0; box-sizing: border-box;
            font-family: 'Roboto Mono', monospace;
            background-color: #000;
            color: #fff; height: 100vh;
            overflow: hidden;
            justify-content: center;
            transition: background-color 0.3s, color 0.3s;
        }
        .sectionscontainer{
            display: block;
            justify-items: center;
            align-content: center;

            scrollbar-color: white black;
            height:calc(100vh - 180px); 
        }
        .scrolltheme{
            scrollbar-color: black white;
        }
        .scroll{
             overflow-y: scroll;
            overflow-x: hidden;
        }

        .container {
            background-color: inherit;
            text-align: center;
            transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            top: 35vh;
            width: 100%;
            z-index: 1000;
            margin-bottom: 50px;
        }

        .container.shift-up {
            top: 5vh;
        }

        .container h1 {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 1rem;
            cursor: pointer;
            position: relative;
        }

        .container h1:hover::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 0;
            height: 2px;
            background: currentColor;
            transition: width 0.3s ease-in-out;
        }

        .container h1.index-page:hover::after {
            width: 0;
        }

        .container p {
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }

        .menu {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            z-index: 5000;
            width: 100%;
            justify-content: center;
            position: relative;
        }

        .menu.sub-page {
            padding-bottom: 0.5rem;
            overflow: hidden;
            position: relative;
        }

        @keyframes expandLine {
            0% {
                transform: scaleX(0); /* Line starts collapsed */
            }
            100% {
                transform: scaleX(1); /* Line fully expanded */
            }
        }

        .menu.sub-page::after {
            content: '';
            position: absolute;
            left: 0; /* Start at the left edge of the container */
            bottom: 0px; /* Position at the bottom of the menu */
            width: 100%; /* Full width of the container */
            height: 2px; /* Thickness of the line */
            background: currentColor; /* Use the current text color */
            transform: scaleX(0); /* Initially collapsed */
            transform-origin: center; /* Expand from the center */
            animation: none; /* No animation by default */
            z-index: 1000; /* Ensure it appears on top */
        }

        .menu.sub-page.active::after {
            animation: expandLine 1s ease forwards; /* Trigger animation on activation */
        }

        .menu li {
            display: inline;
        }

        .menu li a {
            color: inherit;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 500;
            position: relative;
            cursor: pointer;
        }

        .menu li a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 0;
            height: 2px;
            background: currentColor;
            transition: width 0.3s ease-in-out;
        }

        /* Active color for first item: Blue gradient */
        .menu li:nth-child(1) a.active {
            background: linear-gradient(to right, #4facfe, #00f2fe); /* Blue gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        /* Active color for second item: Green gradient */
        .menu li:nth-child(2) a.active {
            background: linear-gradient(to right, #00ff87, #00b894); /* Green gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        /* Active color for third item: Brighter orange gradient */
        .menu li:nth-child(3) a.active {
            background: linear-gradient(to right, #ffad63, #ff6a33); /* Bright orange gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        /* Active color for fourth item: Purple gradient */
        .menu li:nth-child(4) a.active {
            background: linear-gradient(to right, #a18cd1, #c084fc); /* Purple gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        /* Active color for fifth item: Red gradient */
        .menu li:nth-child(5) a.active {
            background: linear-gradient(to right, #ff4b1f, #ff6347); /* Red gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }


        /* First item: Blue gradient */
        .menu li:nth-child(1) a:hover {
            background: linear-gradient(to right, #4facfe, #00f2fe); /* Blue gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease-in-out;
        }

        /* Second item: Green gradient */
        .menu li:nth-child(2) a:hover {
            background: linear-gradient(to right, #00ff87, #00b894); /* Green gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease-in-out;
        }

        /* Third item: Brighter orange gradient */
        .menu li:nth-child(3) a:hover {
            background: linear-gradient(to right, #ffad63, #ff6a33); /* Bright orange gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease-in-out;
        }

        /* Fourth item: Purple gradient */
        .menu li:nth-child(4) a:hover {
            background: linear-gradient(to right, #a18cd1, #c084fc); /* Purple gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease-in-out;
        }

        /* Fifth item: Red gradient */
        .menu li:nth-child(5) a:hover {
            background: linear-gradient(to right, #ff4b1f, #ff6347); /* Red gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background 0.5s ease-in-out;
        }

        .toggle-theme {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: inherit;
            cursor: pointer;
            z-index: 9999;
            transition: color 0.3s, transform 0.3s;
        }

        .toggle-theme.spin {
            animation: spin 0.4s linear;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .sub-section {
            background-color: inherit;
            display: none;
            position: relative;
            width: 80%;
            color: inherit;
            padding: 2rem;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid currentColor;
            opacity: 0;
        }

        .sub-section.active {
            display: block;
            animation: fade-in 0.8s ease forwards;
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <button class="toggle-theme" onclick="toggleTheme()">☀️</button>
    <div class="container" id="main-container">
        <h1 class="index-page" onclick="showMainPage()">Your Name</h1>
        <ul class="menu" id="menu-bar">
            <li><a id="about-link" href="#about" onclick="showAbout()">About</a></li>
            <li><a id="research-link" href="#research" onclick="showResearch()">Research</a></li>
            <li><a id="project-link" href="#projects" onclick="showProjects()">Projects</a></li>
            <li><a id="cv-link" href="#cv" onclick="showCV()">CV</a></li>
            <li><a id="contact-link" href="#contact" onclick="showContact()">Contact</a></li>
        </ul>
    </div>
    <section class="sectionscontainer">
        
        <div class="sub-section" id="about-section">
        <h2>About Me</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet ante in est auctor viverra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris tristique, nunc a interdum ornare, felis massa egestas est, nec semper mi elit vel ipsum. Donec nisi mauris, congue tincidunt dui id, ornare accumsan leo. Pellentesque pretium molestie elit et tristique. Nunc ac egestas velit. Integer tempus et felis quis rutrum.

Vivamus posuere quis tellus et ultrices. Maecenas in egestas libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius quam quis dictum mollis. Pellentesque at aliquam ipsum, ut gravida libero. Nulla a dui et dolor gravida vehicula. Etiam ornare at tellus sed vulputate. Cras bibendum enim eu fringilla sagittis. Phasellus id lorem id augue ullamcorper commodo a at ante. Etiam in commodo lacus, at vulputate metus. Aliquam accumsan tristique ipsum non venenatis. Nulla facilisi. Cras eget accumsan nulla. Nullam id gravida massa. Nunc varius blandit nulla, id convallis odio tincidunt ac.

Maecenas tincidunt dui dui, in ultricies dui mollis ut. Ut vel egestas nunc. Donec porttitor turpis vel vestibulum dignissim. Donec feugiat magna facilisis mi rhoncus rutrum. Sed a commodo tortor, ac gravida dui. Donec ac lorem in sem eleifend malesuada nec id lacus. Nullam efficitur gravida dignissim.

Vivamus id hendrerit massa. Fusce quis nunc tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sollicitudin feugiat eros, ut iaculis ex vestibulum eget. Nulla tellus risus, pulvinar a imperdiet ut, molestie vitae turpis. Donec posuere vestibulum erat sit amet maximus.

Cras vel libero non eros tempor ornare quis eu odio. Duis vel gravida dolor. Aenean viverra justo non elit viverra, id mollis tellus scelerisque. Proin eros neque, rutrum a eros eu, pharetra pretium leo. In neque enim, luctus id felis in, tempor ultricies dui. Pellentesque eget ante malesuada, euismod felis eu, porttitor diam. Nam rutrum leo tortor. Aenean tristique nibh mollis orci posuere, ac facilisis libero finibus. Duis id interdum mi, in interdum dui.
        </p>
    </div>

        <div class="sub-section" id="research-section">
            <h2>Research</h2>
            <p>
                This is the Research section content. Add details about your research projects, papers, and academic achievements here.
            </p>
        </div>

        <div class="sub-section" id="projects-section">
            <h2>Projects</h2>
            <p>
                This is the Projects section content. Add details about your personal or professional projects here.
            </p>
        </div>

        <div class="sub-section" id="cv-section">
            <h2>CV</h2>
            <p>
                This is the CV section content. Add your resume or CV details here.
            </p>
        </div>

        <div class="sub-section" id="contact-section">
            <h2>Contact</h2>
            <p>
                This is the Contact section content. Add your contact details or a contact form here.
            </p>
        </div>
  
    </section>
  
    <script>
        function toggleTheme() {
            const body = document.body;
            const button = document.querySelector('.toggle-theme');
            const aboutSection = document.querySelector('.about-section');

            button.classList.add('spin');
            setTimeout(() => button.classList.remove('spin'), 500);

            const isDarkMode = body.style.backgroundColor === 'black';

            body.style.backgroundColor = isDarkMode ? 'white' : 'black';
            body.style.color = isDarkMode ? 'black' : 'white';
            button.textContent = isDarkMode ? '🌙' : '☀️';
            document.querySelector('.sectionscontainer').classList.toggle("scrolltheme");
        }

        function showAbout() {
            const container = document.getElementById('main-container');
            const aboutSection = document.getElementById('about-section');
            const aboutLink = document.getElementById('about-link');
            const menuBar = document.getElementById('menu-bar');

            // Deactivate all sections and links
            deactivateSections();

            container.classList.add('shift-up', 'shift-higher');
            setTimeout(() => menuBar.classList.add('sub-page', 'active'), 200); // Delay activation of the line animation
            setTimeout(() => {
                aboutSection.classList.add('active');
                aboutLink.classList.add('active');
            }, 100); // Ensure fade-in starts only after upward animation
            document.querySelector('.sectionscontainer').classList.add("scroll");
        }

        function showResearch() {
            const container = document.getElementById('main-container');
            const researchSection = document.getElementById('research-section');
            const researchLink = document.querySelector('a[href="#research"]');
            const menuBar = document.getElementById('menu-bar');

            // Deactivate all sections and links
            deactivateSections();

            container.classList.add('shift-up', 'shift-higher');
            setTimeout(() => menuBar.classList.add('sub-page', 'active'), 200); // Delay activation of the line animation
            setTimeout(() => {
                researchSection.classList.add('active');
                researchLink.classList.add('active');
            }, 100); // Ensure fade-in starts only after upward animation
                        document.querySelector('.sectionscontainer').classList.add("scroll");

        }

        function showProjects() {
            const container = document.getElementById('main-container');
            const projectsSection = document.getElementById('projects-section');
            const projectLink = document.querySelector('a[href="#projects"]');
            const menuBar = document.getElementById('menu-bar');

            // Deactivate all sections and links
            deactivateSections();

            container.classList.add('shift-up', 'shift-higher');
            setTimeout(() => menuBar.classList.add('sub-page', 'active'), 200); // Delay activation of the line animation
            setTimeout(() => {
                projectsSection.classList.add('active');
                projectLink.classList.add('active');
            }, 100); // Ensure fade-in starts only after upward animation
                        document.querySelector('.sectionscontainer').classList.add("scroll");

        }

        function showCV() {
            const container = document.getElementById('main-container');
            const cvSection = document.getElementById('cv-section');
            const cvLink = document.querySelector('a[href="#cv"]');
            const menuBar = document.getElementById('menu-bar');

            // Deactivate all sections and links
            deactivateSections();

            container.classList.add('shift-up', 'shift-higher');
            setTimeout(() => menuBar.classList.add('sub-page', 'active'), 200); // Delay activation of the line animation
            setTimeout(() => {
                cvSection.classList.add('active');
                cvLink.classList.add('active');
            }, 100); // Ensure fade-in starts only after upward animation
                        document.querySelector('.sectionscontainer').classList.add("scroll");

        }

        function showContact() {
            const container = document.getElementById('main-container');
            const contactSection = document.getElementById('contact-section');
            const contactLink = document.querySelector('a[href="#contact"]');
            const menuBar = document.getElementById('menu-bar');

            // Deactivate all sections and links
            deactivateSections();

            container.classList.add('shift-up', 'shift-higher');
            setTimeout(() => menuBar.classList.add('sub-page', 'active'), 200); // Delay activation of the line animation
            setTimeout(() => {
                contactSection.classList.add('active');
                contactLink.classList.add('active');
            }, 100); // Ensure fade-in starts only after upward animation
                        document.querySelector('.sectionscontainer').classList.add("scroll");

        }

        // Update the main page reset function to handle both About and Research sections
        function showMainPage() {
            const container = document.getElementById('main-container');
            const menuBar = document.getElementById('menu-bar');
            const sections = document.querySelectorAll('.sub-section');

            // Reset the UI elements
            container.classList.remove('shift-up', 'shift-higher');
            menuBar.classList.remove('sub-page', 'active');

            // Deactivate all sections
            sections.forEach(section => section.classList.remove('active'));

            // Deactivate all menu links
            document.querySelectorAll('.menu li a').forEach(link => link.classList.remove('active'));

            // Update the URL to the index page
            history.pushState(null, null, ' ');
                        document.querySelector('.sectionscontainer').classList.remove("scroll");

        }

        // Handle navigation for direct URLs
        if (window.location.hash === '#about') {
            showAbout();
        } else if (window.location.hash === '#research') {
            showResearch();
        } else if (window.location.hash === '#projects') {
            showProjects();
        } else if (window.location.hash === '#cv') {
            showCV();
        } else if (window.location.hash === '#contact') {
            showContact();
        }

        function deactivateSections() {
            const sections = document.querySelectorAll('.sub-section');
            const links = document.querySelectorAll('.menu li a');

            // Deactivate all sections
            sections.forEach(section => section.classList.remove('active'));

            // Deactivate all links
            links.forEach(link => link.classList.remove('active'));
        }

        document.querySelectorAll('.menu li a').forEach(link => {
            link.addEventListener('click', function (event) {
                // Remove active class from all menu items
                document.querySelectorAll('.menu li a').forEach(item => item.classList.remove('active'));

                // Add active class to the clicked item
                this.classList.add('active');
            });
        });
        
        // Ensure light/dark mode toggle works on the first click
        document.addEventListener('DOMContentLoaded', () => {
            const body = document.body;
            body.style.backgroundColor = 'black';
            body.style.color = 'white';
        });
    </script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search