Is there a way to eliminate the shadow effect on a specific part of a material-ui AppBar?

I want to remove the shadow that appears on the navbar when it overlaps with the sidebar.

https://i.sstatic.net/eHh0u.png

Currently, I am using Material-UI's AppBar component for my NavBar.

export default function NavBar() {
  return (
    <div>
      <AppBar position="fixed" elevation={4}>
        <Toolbar variant="regular">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
}

In addition, I have a custom sidebar component,

.sidebar {
  left: 0;
  top: 64px;
  height: 100vh;
  width: 70px;
  background-color: #3f50b5;
  position: fixed;
}

.sidebar::before{
  display: none;
}

I specifically want to eliminate the shadows from the Navbar only in the section where it overlays the Sidebar.

cssreactjsmaterial-uijsx

Answer №1

Sharing this solution since I took a considerable amount of time to discover an easy way to eliminate the elevation.

To remove the shadow, simply include the elevation property in the AppBar component.

<AppBar position="fixed" elevation={0}>

Answer №2

To achieve this effect on your navbar, you can utilize a ::after pseudo element. This pseudo element should have the same width as your sidebar and be positioned relative to the navbar.

Considering that the AppBar has various breakpoints, you will need to adjust the positioning of the pseudo element:

const useStyles = makeStyles((theme) => ({
  root: {
    "&::after": {
      position: "absolute",
      content: '""',
      width: "70px",
      height: "8px",
      top: "48px",
      backgroundColor: theme.palette.primary.main,
      [theme.breakpoints.down("xs")]: {
        top: "56px"
      },
      "@media (orientation: landscape)": {
        top: "48px"
      },
      [theme.breakpoints.up("sm")]: {
        top: "64px"
      }
    }
  }
}));

export default function NavBar() {
  const classes = useStyles();

  return (
    <div>
      <AppBar classes={{ root: classes.root }} position="fixed" elevation={4}>
        <Toolbar variant="regular">
          <IconButton edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
}

I've set up a sandbox with just the navbar and added a darker shadow for better visibility:

https://codesandbox.io/s/so-navbar-hide-shadow-dhrcz

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

"Step-by-step guide on installing the most recent version of fontawesome using npm for a React js project

Is there a way to install the latest version of fontawesome (5.0.10) using npm when unable to do so through the standard process? I attempted the following command: npm i @fortawesome/fontawesome ...

reactjsnpmfont-awesome-5

Testing a React component that uses useParams: A step-by-step guide

I've been working on creating a BBS App using TypeScript, React, React Router, and React Testing Library. However, I've encountered an issue where a component utilizing useParams is not passing a test. Interestingly, it seems to be working correc ...

javascriptreactjstypescriptreact-routerreact-testing-library

Utilizing pre-built component libraries within the application structure in Next.js version 13

When utilizing the app directory in nextJS 13, it is essential for all client components to include a "use client" directive. However, many components from popular React libraries do not have this directive. To address this issue, I discovered a workaroun ...

reactjsnext.jscomponentsnext.js13

Arrangement of tables using HTML and CSS on the outdoor patio

Looking for advice on how to align buttons in the last column of a table outside of the table but in the same row. The attached image shows the current layout: https://i.sstatic.net/Ex5AR.png ...

htmlcssbootstrap-4html-table

Using jQuery to implement interactive hover effects on individual items within a list

I'm currently developing a project that involves displaying speech bubbles next to each list item when hovered over. These speech bubbles contain relevant information specific to the item being hovered on. To achieve this functionality, I've crea ...

javascriptjqueryhtmlcss

The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

I am having an issue with a login popup on my website. Whenever I fill in the login or registration information and then close the popup, the next time I open it, the input box still contains the previous data. How can I reset the popup to always open with ...

javascripthtmlcssflexboxfrontend

Struggling to create a drop-down box with CSS and not achieving the expected results

Currently, I am delving into the world of HTML and CSS to hone my skills in front-end web development. While attempting to code a drop-down box within my navigation menu, I have encountered an issue where the drop-down opens at the left corner while the na ...

htmlcss

Swapping React Components with a Click of a Button

My webpage features a button labeled "Sign Up". Once this button is clicked, I want it to display a new component named "SignUp" in place of the original button. Currently, my method involves using setState to trigger the rendering of the new component upo ...

javascriptreactjs

Encountering a Typescript issue when trying to access props.classes in conjunction with material-ui, react-router-dom

I could really use some help with integrating material-ui's theming with react-router-dom in a Typescript environment. I'm running into an issue where when trying to access classes.root in the render() method, I keep getting a TypeError saying &a ...

typescriptmaterial-uireact-router-dom

Is there a way to ensure my circular image maintains its shape when viewed on mobile devices?

On my website, I have circular images implemented using the Bootstrap 4 class rounded-circle. While they appear perfectly round on desktop, they become oval-shaped on mobile devices such as the iPhone XR. You can see the issue in this Codepen link. Here i ...

htmlcssimagebootstrap-4

The build process was unsuccessful due to an error stating: "Unable to compile - Unable to read property 'toLowerCase' of an undefined value

Whenever I run npm run build in my create-react-app project, it fails to compile and shows me the error message Cannot read property 'toLowerCase' of undefined. I have examined my code and realized that I do not use toLowerCase anywhere. The onl ...

reactjsnpmbuild

My website's logo is not appearing on the navigation bar in the HTML code

Hi there! I recently tried adding a logo to my navigation bar in an HTML file, but for some reason, the logo doesn't appear when I run the file. I'm currently learning web development through a course on Coursera, and I am quite new to programmin ...

htmlcssbootstrap-5

Instructions for triggering a function upon an onClick event in ReactJs

I have a handleClick event that should run the renderDetail function in the {this.state.ShowInfo[i]} div when clicked. I have implemented it as shown below, but using callbacks did not work. class App extends React.Component { constructor(props) { super ...

reactjs

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

javascriptjqueryhtmlcss

Guide on passing a JSON body as a string in a PUT API request using Fetch in a React.js application

How can I pass a JSON body as a string in a FETCH PUT API in React JS? I am attempting to add 20 to the Balance like this: Balance: details[0].Balance.toString() + 20, but it is not working as expected. I want the entire result to be a string. Any assista ...

javascriptnode.jsreactjs

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

javascriptjqueryhtmlcssslideshow

Is there a way to align the mat card title and subtitle on a single line?

My code is utilizing Angular material and here is the HTML snippet: <mat-card> <mat-card-header *ngFor="let club of result[0]"> <mat-card-title>{{club.clubName}}</mat-card-title> <mat-card-subtitle>Clu ...

htmlcssangularangular-material

How can one element be made to rely on the presence of another element?

I'm currently working on my portfolio website and encountering an issue. Whenever I hover over an image of a project, the image expands in size, becomes less transparent, and a description of the project pops up. However, I would like to include a lin ...

javascripthtmlcss

I'm unable to import correctly using the --compiler option

Having an issue here. I'm trying to bring in the typescript compiler. I used this command: bit import bit.envs/compilers/typescript --compiler Unfortunately, it didn't work. This is the error message: bit import [ids...] import components in ...

reactjstypescriptbit.dev

What is the best way to access a component generated using the .map() function from a separate component?

My objective is to create a grid of toggle buttons that store their selected values in an array. This array will then be used to display another row of buttons based on the selections. Once a button in the new row is chosen, it should deselect the corresp ...

reactjsreact-hooksmaterial-uiuse-ref