Combining Images and Navigation in Next.js using Tailwind CSS

I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected.

What I want is for the image to remain below the dropdown menu when it is opened

The linked image should appear beneath the black navbar, positioned against an orange background

This snippet shows the code for the navbar:

import React from "react";
import Link from "next/link";
import { useState } from "react";

function MobileNav({ open, setOpen }: any) {
  // function logic here
}

export default function Navbar() {
  // component code here
}

And here is the section content:

import React from "react";
import type { NextPage } from "next";
import Navbar from "../components/Navbar";
import Head from "next/head";
import Image from "next/image";
import adrian2 from "../public/adrian3.png";

const about: NextPage = () => {
  // function logic here
};

export default about;

Answer №1

Instead of including <navbar /> solely on the About page, you have the option to import both the navbar and about page within the _app.js file and then structure them accordingly like so.

.
.
.
<Navbar />
<About />
.
.
.

Alternatively, you can also incorporate a 'z-10' class to this element as well.

.
.
.
<div className="gap-10 hidden md:flex z-10">
  <Link href="/about">
  <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">About Me</a>
  </Link>
  <Link href="/projects">
  <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">Projects</a>
  </Link>
  <Link href="/resume">
  <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">CV</a>
  </Link>
</div>
.
.
.

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

Troubleshooting NextJS Continuous Deployment on Cloud Run issues

After attempting to automate the deployment of a default Next.js app from GitHub to Google Cloud Run, I encountered an issue where it got stuck at the Building and Deploying stage. https://i.sstatic.net/bmvoG.png I experimented with both using a Docker i ...

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

Progressive rendering of a substantial mesh using three.js

How can I efficiently render a large static mesh in three.js, even if it's 2 GB with tens of millions of polygons? My plan is to stream the mesh geometry buffers into indexedDB and render them progressively to the screen, all while maintaining an int ...

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

"Is it possible to access variables declared in the main app.js file from separate route files in Node.js Express 2.5.5 and if so

Recently, I've started using the latest version of Express (2.5.5) which now automatically creates a ./routes directory in addition to ./views and ./public In the routes directory, there is an index.js file that includes: /* * GET home page. */ e ...

What steps should be taken to make mocha utilize the HTTP response?

Every time I make an http call, the function it returns causes my comparison to fail because [Function] is never equal to the value I want. Is there a way to make my assert statement consider the true/false flag within it? # test/helloWorld.js const othe ...

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

Updating Angular 5 Views Dynamically Using a While Loop

I am facing an issue in my app where I have a progress bar that updates using a while loop. The problem is that the view only updates after the entire while loop has finished running, even though I am successfully changing the update progress value with ea ...

Is there a way to establish communication between two ReactJS components by utilizing Jotai?

I am facing a problem with 2 reactjs files: Reports.js (handles report requests and displays results) AuthContext.js (maintains communication with backend server through a socket connection) The user initially visits the report page generated by Reports. ...

Next.js triggers the onClick event before routing to the href link

Scenario In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables. Objective I aim to trigger the onClick function before navigating to the href location. The Code I'm Using <Link href={`/sess ...

Troubleshooting the Ineffectiveness of the CSS Custom Property Url in Asp .Net

Working on styling some cards within an MVC project, I have a custom property in my CSS file called "--bg-img" which is defined as follows: background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))) ...

Ways to style specific dates on a datepicker?

Is there a way to customize the appearance of the first and last selected days in my ui datepicker for booking, similar to the design shown in the image linked below? https://i.sstatic.net/bKnRS.jpg var dateFormat = "DD/MM/YY", ...

It is not possible for AngularJS to retrieve values using ng-model when ng-repeat is being used

Is there a way to capture dynamically generated data using ng-model (data created with ng-repeat) so that I can send it as an object to Firebase, my flat database? Currently, the ng-model is only retrieving empty strings as values. Any ideas for a solution ...

The Material-ui bug: multiple instances of the modal opening when a button is clicked

I have the following code in my render() method: render() { const classes = this.useStyles(); return ( <Paper style={classes.root}> <Table style={classes.table}> <TableBody> {this.state.deadTopics ...

What is the purpose of returning a function in a React Hook?

Currently, I am incorporating Material-UI components into my project and have implemented the AutoComplete component in my application. While exploring an example provided by the Material-UI team, I stumbled upon a fascinating instance of using Ajax data ...

The useAutocomplete function in Material-UI fails to consider the disabled

Currently, I am working on developing my own Autocomplete component by utilizing the useAutocomplete hook from the mui/base package. Most parts of the implementation are functioning correctly, except for the disabled option. My expectation is that the com ...

Center text vertically in a textarea

Is it feasible to vertically center the content of a <textarea> within a multi-line search box while keeping everything aligned in the middle? ...

Modify the JSON structure of a deeply nested object

I am attempting to convert a deeply nested JSON object from one structure to another so that it can be properly used with the jQuery Nestable library. Here is the original format I am working with: { "scanned": { "a3": { ...

Transforming dates from JSON and showcasing them on a DataTable

I'm facing an issue with my local JSON file where the dates are being rendered in a DataTable as /Date(1350028800000)/ (10/12/2012). I came across this thread which talks about converting the date format, but I need help figuring out how to implement ...

The issue with the favicon not displaying on a dynamically routed page in Next.js

I have a file named _documents.js that looks like this: import NextDocument, { Html, Head, Main, NextScript } from 'next/document' import { ColorModeScript } from '@chakra-ui/react' export default class Document extends NextDocument { ...