Troubleshooting my CSS navigation bar - What am I missing?

I've been developing a navigation bar using a combination of HTML, CSS, and JavaScript.

After writing the code and setting the display of the bar to fixed, I encountered an issue where the content of the page was overlapping the nav bar. Below you'll find screenshots of the code along with the actual code snippet:

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>

  [...]
    
    .content {
      position: absolute;
    }
  
  [...]

</script>

</body>

</html>

I have experimented with various settings but have yet to find a satisfactory solution.

javascripthtmlcssnavigationbar

Answer №1

Start with the basics by moving the content inside the body and adjusting the top position of the content as needed based on screen resolution. Also, make sure to change the background for the side navigation.

  <!DOCTYPE html>
    <html>
    
    <head>
    
      <meta charset="UTF-8">
    
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
    
    
      <title>AlmaTech</title>
    
    
    
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
      />
    
      <link rel="stylesheet" href="all.min.css">
    
      <style>
        @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
        * {
          font-family: 'Signika Negative', sans-serif;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          border-radius: 5px;
        }
        
        .brand {
          font-family: 'Caveat', cursive;
          font-family: 'Cute Font', sans-serif;
        }
        
        .nav-bar-container {
          display: flex;
          justify-content: space-between;
          width: 100%;
          align-items: center;
          padding: 10px 40px;
          box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
          background: #e7e7e7aa;
          position: fixed;
        }
        
        .nav-bar-middle {
          display: flex;
          gap: 30px;
        }
        
        .nav-bar-middle li {
          list-style: none;
          font-size: 20px;
        }
        
        .nav-bar-middle-items {
          display: flex;
          gap: 30px;
        }
        
        .content {
          position: absolute;
          top:60px;
        }
        
        .nav-bar-side {
          position: sticky;
          transition: all 0.5s ease-in-out;
          background: #e7e7e7aa;
          display: flex;
          align-items: space-between;
          justify-content: flex-start;
          width: 150px;
          display: none;
          border-radius: 0 0 10px 0;
          box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
          padding-right: 20px;
          padding-bottom: 20px;
          padding-left: 20px;
          flex-direction: column;
          margin-top: 0;
        }
        
        .nav-bar-side ul li {
          padding-top: 20px;
        }
        
        .nav-bar-side ul li {
          list-style: none;
        }
        
        #menuIcon {
          display: none;
        }
        
        .show {
          display: block;
          position: sticky;
          background: #e7e7e7ad;
          display: flex;
          align-items: space-between;
          justify-content: flex-start;
          width: 150px;
        }
        
        ...
    
      </style>
    
    </head>
    
    <body>
    
      <div class="body">
    
        <div class="nav-bar-container">
    
          ...
    
        </div>
    
    
        ...
    
         <div class="content">
    
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
      </div>
    
      </div>
    
    
    
    
    
      <script>
        const navIcon = document.querySelector('#menuIcon');
    
    
    
        const navSide = document.querySelector('.nav-bar-side');
    
    
    
        navIcon.addEventListener('click', toGGle);
    
    
    
        function toGGle() {
    
          navSide.classList.toggle('show');
    
    
    
          navIcon.classList.toggle('rotate');
    
    
    
        }
      </script>
    
    </body>
    
    </html>

Answer №2

To adjust the stacking order of elements, you can utilize the z-index property. In this example, I have set it to 9999.

.nav-bar-container {
  /* ... */
  z-index: 9999;
}


<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=wap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
      z-index: 9999;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur nisl convallis turpis porta tincidunt. Fusce vulputate mi eu interdum facilisis. Aliquam sed semper nibh. Sed auctor tortor odio, et placerat neque maximus non. Proin congue ultricies arcu, vitae eleifend ex tempus vel. Duis fermentum quis risus ac pharetra. Quisque eu purus ullamcorper, lobortis lorem eu, elementum odio. Suspendisse potenti.

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toggle);



    function toggle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

Answer №3

To make the .nav-bar-container element higher in the stacking order, simply apply a CSS rule like z-index: 99 or any number greater than 1.

If you're worried about the opacity of the nav-bar-container, try removing the aa at the end of the background property value, so it looks like #e7e7e7.

<!DOCTYPE html>
<html>

... (omitted for brevity) ...

  </script>

</body>

</html>

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

Enable/disable specific dates in datepicker depending on dropdown selection

Struggling with disabling specific days of the week in the jQuery datepicker based on a selected dropdown option. Provided below is the snippet of my HTML and JavaScript code: <script> $("#dates").datepicker({ minDate: 0 }); </sc ...

javascriptjqueryhtmldatepicker

Is it possible for a JavaScript .execute function to be executed synchronously, or can it be transformed into an Ajax

Currently, I am utilizing the ArcGIS API for Javascript which can be found at this URL: The JavaScript code snippet I'm working with appears to be running asynchronously. Is there a way to convert it to run synchronously or potentially transform it i ...

javascriptajaxsynchronous

Unable to extract a particular value from a JSON data structure

This situation has been on my mind for a good couple of hours now. I have this json object with example values like so: { "events": [ { "id": 64714, "live": false, "start": "1399117500", "league_ ...

javascriptjson

Unlock the message with Proxy Re-encryption technology

I'm completely new to encryption and am experimenting with a Node JS library called recrypt-js for Proxy Re-encryption using CryptoJS. I tried encrypting the message "test data" following the example provided, but I'm facing difficulty when tryin ...

javascriptnode.jscryptojsencryption-asymmetric

Verify whether the username is present in the Firebase database using JavaScript

Using Firebase Function, I have created a function that allows users to complete their profile by adding an entry to the Firebase Realtime Database. Here is an example of how the database structure looks: { users: { AeknQrtMIyPpC4EQDPNQYvQUxCA3: ...

javascriptfirebasefirebase-realtime-databasegoogle-cloud-functions

Cease the loading of a script in an HTML file

I have encountered a challenge in preventing a script from loading on my Wordpress website. The HTML file contains two scripts: <script type="0f1a6d7ca503db410c0d10c4-text/javascript" src='https://www.[-----------].se/wp-content/plugins/ ...

javascriptphpwordpress

Using Flask to invoke a Python function that displays an image when a button is clicked

I am currently working on developing a basic web application that allows clients to upload images, processes them on the server, and then returns the processed image to be displayed in a specific div. I attempted to use ajax for this purpose, but encounter ...

javascriptpythonjqueryajaxflask

Ways to showcase a website within an HTML document using a URL?

Is it possible to show 2 webpages on a single aspx webpage? For instance, When a user opens the link for www.mywebsite.com, I would like to display both www.google.com and www.bing.com on my homepage. Behind the scenes, I will call two separate URLs an ...

javascripthtmlcssasp.net

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

What could be causing my LESS files not to compile properly in grunt?

I've successfully installed npm and ran npm init. Additionally, I've installed the following packages using npm: grunt grunt-contrib-less grunt-contrib-watch jit-grunt --save-dev My Gruntfile.js configuration looks like this: module.exports = f ...

javascriptnode.js

I am facing difficulty in incorporating an IP address or URL within an IFRAME in my Cordova Android application

This page does not allow any iframes to load except for the YouTube video URL. When attempting to use any other iframe URL, the following error code is displayed: Error : net::ERR_BLOCKED_BY_RESPONSE In the example below, any URL or IP address fails to l ...

javascripthtmlcordova

I am facing an issue with Angular 14 and Webpack 5, where certain unnecessary nodejs modules seem to be hindering me from successfully serving

I have recently started working on a cutting-edge Angular 14 application. My current node version is v14.20.0, and npm version is 8.17.0. Despite my best efforts, I seem to be facing an issue with multiple nodejs dependencies being included in my project ...

javascriptnode.jsangularwebpack

angular click triggers the following content

How can I make the following content appear when clicked? I have a list of content that displays up to 20 items, but I want to show the rest when clicked. I have created the nextMovieList method for this purpose. import { Component, OnInit } from ' ...

javascriptangularapi

Having trouble parsing PHP JSON encoded data in JavaScript

When I make an AJAX call to a PHP script that returns a JSON encoded object, I encounter some issues. $.post("php/getCamera.php", { cam_id: identifier }, function(data){ console.log(data); //var camera = JSON.parse( ...

javascriptphpjqueryajaxjson

What are the best ways to make this date more visually appealing and easy to understand?

Hey there! So I have a date that looks like this: 2022-06-28T17:09:00.922108+01:00 I'm trying to make it more readable, but unfortunately, when I attempted using moment-js in my javascript/react project, it threw an error stating "invalid format". ...

javascriptreactjs

Securely transmit data using a JQuery modal dialog form with HTTPS encryption

I currently have a functional modal login dialog. The only issue I'm facing is that when the original page is loaded through http, I still need to securely pass credentials to the server via https. Ideally, I would like to achieve this with minimal mo ...

javascriptjqueryajaxjsonp

Enhance your Zara shopping experience with the dynamic image zoom-in

I am currently exploring ways to replicate the image zoom-in feature seen on Zara's product pages. To see this effect in action, visit their site: Upon clicking on the image, it opens up in a popup window where it is enlarged to fit the entire screen ...

jquerycssimageweblightbox

Leveraging personalized design elements from a theme in Material UI without the need for makeStyles

Is there a way to access the theme.customElements.actionButton in MyComponent without relying on makeStyles? For instance, can I directly use className={theme.customElements.actionButton}? theme.js const theme = createMuiTheme({ customElements: { ...

javascriptmaterial-uithemesformik-material-ui

Is it necessary to execute 26 individual mysql queries in order to group items alphabetically in a directory listing page?

I am looking to create a directory listing page for my website that displays all of my articles grouped by the first letter of their titles. Do I have to execute 26 MySQL queries like: mysql query like "SELECT * FROM articles Where title like 'a%&ap ...

phpmysqlhtml

Having difficulty extracting information from an HTML page using Swift

I'm attempting to convert data retrieved from an HTML page into a readable format, but the string urlContent is showing as nil even though the data received from the NSURLSession is not null. This is my approach: var city = "London" var url = NSURL ...

htmlswiftdecodensurlsession