HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected.

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-items: center;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 999;
}

.nav-list {
  background-color: #222c36;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.nav-list li {
  list-style: none;
  padding: 26px 20px;
}

.nav-list li a {
  text-decoration: none;
  size: 42;
  color: #ffff;
}

.nav-list li a:hover {
  color: #3b92d1;
}

.logo img {
  width: 20%;
  border: 3px solid white;
  border-radius: 50px;
}

.logo {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}

.firstSection {
  height: 100vh;
}

.firstHalf {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondHalf {
  width: 30%;
}

.secondHalf img {
  display: block;
  margin: auto;
}

.box-main {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  max-width: 50%;
  margin: auto;
  height: 90%;
}

html,
body {
  max-width: 100%;
  max-height: 100%;
  overflow-x: hidden;
}

.site {
  overflow: hidden;
}
<nav class="navbar">
  <ul class="nav-list">
    <div class="logo"><img src="img/logo.jpg" alt="logo"></div>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#resume">Resume</a></li>
    <li><a href="#contact">Contact Me</a></li>
  </ul>
</nav>
<section class="background firstSection">
  <div class="box-main">
    <div class="firstHalf">
      <p class="text-big">Aadyant Chaturvedi</p>
      <p class="text-small">Unity Game Developer</p>
      <div class="buttons">
        <button class="btn">Github</button>

      </div>
    </div>

    <div class="secondHalf">
      <img src="img/email_icon.png" alt="gmail" width="100%">
    </div>
  </div>
</section>

javascripthtmlcss

Answer №1

* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  max-height: 100%;
  /* overflow-x: hidden;  /*comment this line */
}

.site {
  overflow: hidden;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center; /* should be justify-content: center*/
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 999;
}

.nav-list {
  background-color: #222c36;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}

.nav-list li {
  list-style: none;
  padding: 26px 20px;
}

.nav-list li a {
  text-decoration: none;
  size: 42;
  color: #ffff;
}

.nav-list li a:hover {
  color: #3b92d1;
}

.logo img {
  width: 20%;
  border: 3px solid white;
  border-radius: 50px;
}

.logo {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background: rgba(0, 0, 0, 0.7) url('../img/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}

.firstSection {
  height: 100vh;
}

.firstHalf {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.secondHalf {
  width: 30%;
}

.secondHalf img {
  display: block;
  margin: auto;
}

.box-main {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Roboto Condensed', sans-serif;
  max-width: 50%;
  margin: auto;
  height: 90%;
}
    <nav class="navbar">
        <ul class="nav-list">
            <div class="logo"><img src="img/logo.jpg" alt="logo"></div>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#resume">Resume</a></li>
            <li><a href="#contact">Contact Me</a></li>
        </ul>
    </nav>
    <section class="background firstSection">
        <div class="box-main">
            <div class="firstHalf">
                <p class="text-big">Aadyant Chaturvedi</p>
                <p class="text-small">Unity Game Developer</p>
                <div class="buttons">
                    <button class="btn">Github</button>

                </div>
            </div>

            <div class="secondHalf">
                <img src="img/email_icon.png" alt="gmail" width="100%">
            </div>
        </div>
    </section>
      <section class="background firstSection">
        <div class="box-main">
            <div class="firstHalf">
                <p class="text-big">Aadyant Chaturvedi</p>
                <p class="text-small">Unity Game Developer</p>
                <div class="buttons">
                    <button class="btn">Github</button>

                </div>
            </div>

            <div class="secondHalf">
                <img src="img/email_icon.png" alt="gmail" width="100%">
            </div>
        </div>
    </section>

Kindly remove the overflow-x:hidden in the body section

Answer №2

To enhance your navigation bar design, apply the following CSS code to your navbar class:

.navbar{
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 999;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Sequencing time with Postgres, manipulating views with Angular

I am encountering issues with displaying graphs in AngularJS. My backend is written in nodeJS and includes an aggregator as a buffer for data received from netdata, which is then inserted into the database using a cron job. Now, with a new client request, ...

javascriptangularjsnode.jspostgresql

What is the reason behind div elements shifting when hovering over a particular element?

Currently, I have floated all my div elements (icons) to the left and margin-lefted them to create space in between. I've displayed them inline as well. However, when I hover over one element (icon), the rest of the elements move. Can you please help ...

javascriptjqueryhtmlcss

What is the reason for this Javascript regular expression only successfully matching two out of three identical strings when filtering?

To better illustrate my question, I would like to reference the following link: http://codepen.io/anon/pen/mRxOEP Here are three seemingly identical inputs from customers: <span class="customer_country" id="SW1">, Switzerland</span> <span ...

javascriptjqueryregex

Conceal a division based on its numerical position

I'm having trouble figuring out how to hide multiple divs based on an index that I receive. The code snippet below hides only the first div with the id "medicalCard", but there could be more than one div with this id. document.getElementById("medical ...

javascripthtmlangulartypescript

Getting the most out of your weather API: optimizing search parameters for precise location results and avoiding any confusion with similar locations

When experimenting with new platforms, I often utilize the openweathermap.org's api. However, I have encountered a recurring issue where I struggle to define a precise query for finding certain cities. The api functions smoothly for major cities like ...

javascriptjqueryajaxweather-api

Leveraging Next Js with an external REST API for streamlined authentication and authorization functionality

I am currently working on transitioning my existing application that was developed with Node.js and Express, along with a front end built using create-react-app with Redux, to Next.js. However, I have hit a roadblock as I am unsure of the correct method ...

javascriptnode.jsreactjsexpressnext.js

Implementing a peculiar timing mechanism with the integration of socket.io, jQuery Mobile, and the socket.emit() function

Currently in the process of working with cordova and node.js socket.io, I encountered a peculiar issue with socket.emit(); The following code fails to enter 'room', despite having correct coding: client-side jsfile.js //Two global variables fo ...

javascriptjquerynode.jscordovasockets

tool for showcasing data on a webpage with a specific layout

Which chart library is best suited for presenting data in the formats shown in the images below? Can HighCharts handle these formats? Does Google Charts allow for a combination of bubbles and lines? ...

javascriptjqueryhtmljquery-uihighcharts

Downloading Files from Mongodb Using GridFS

I am working on an application that enables users to upload and download various files. Currently, I am facing a challenge where I am able to retrieve the file from my MongoDB database and download it locally on my machine, but I am encountering difficulti ...

javascriptnode.jsmongodbexpressgridfs

Clear the local storage once the URL's view has been fully loaded

When retrieving details of a specific item by passing URL parameters stored in local storage, I encountered an issue. I need to delete the local storage variables after the view is loaded. However, what actually happens is that the local storage variable ...

javascriptangularjslocal-storage

Managing post and session data during PHP form submission

I've encountered an issue with my code structure. What I aim to achieve is: To validate if post values exist, then execute the query and show the results. If post values are not present, check for a session value. If session is available, manipulate ...

phphtmlformsif-statementisset

Retrieve the computed value of a cell in an Excel spreadsheet using Node.js

Utilizing node.js in tandem with the exceljs module to process my Excel sheets. Writing values into specific cells while others already contain formulas. Seeking a method to trigger those formulas and programmatically store the resultant values in the she ...

javascriptnode.jsexcelsails.jsexceljs

What's causing my pug file to not show the data I retrieved?

In my index.js file, I have confirmed that the data is successfully retrieved using console.log. However, when I attempt to display this data in my view, I encounter an error that says: "Cannot read property 'feedUrl' of undefined. The followin ...

javascriptexpressmongoosepug

When attempting to call Firebase Functions, ensure that Access-Control-Allow-Origin is set up correctly

Although it may seem straightforward, I am confused about how Firebase's functions are supposed to work. Is the main purpose of Firebase functions to enable me to execute functions on the server-side by making calls from client-side code? Whenever I t ...

javascriptangularfirebasexssgoogle-cloud-functions

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

javascriptangularhtmltypescriptangular-material

Tips for effectively managing dynamic xpaths

When conducting a search operation, I am required to select the text that is returned as a result. Each search will produce different xpaths. Below are examples of various xpaths returned during a search: .//*[@id='messageBoxForm']/div/div[1]/di ...

javajavascriptxpathselenium-webdriver

Designing my website to resize and adapt to different screen resolutions using CSS

As I navigate my first week of CSS, HTML, and PHP programming, I encountered a problem with text overlapping and causing issues on my site when scaled according to window size. I'm seeking clarity on what mistakes I may be making. Despite trying medi ...

htmlcssresolution

Java's equivalent to the return function in JavaScript

Currently, I am in the process of adapting three.js into Java while also incorporating my own modifications and enhancements. One specific challenge I am facing involves determining the best approach for managing reflection within the code. As part of thi ...

javajavascriptreflectionthree.js

What could be causing this code to continuously loop without end?

I've been scratching my head trying to understand why this code isn't working. var refP = []; var calculateDistance = function (p1, p2) { return dist(p1.x, p1.y, p2.x, p2.y); } while (refP.length < 24) { var point = { x: -1, ...

javascriptif-statementinfinite-loop

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

javascripthtmlajax