Fixed the position of the Navbar

SiddheshShinde-tech · Oct 22, 2020 · c9413f9 · c9413f9
1 parent 6bb8d70
commit c9413f9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -11,6 +11,11 @@
  height: 100%;
 }
 
+.forNavbar{
+ position: relative;
+ z-index: 110;
+}
+
 .App {
  text-align: center;
 }

diff --git a/src/App.js b/src/App.js
@@ -9,7 +9,7 @@ import Maincard from "../src/MainpageCards/Maincard"
 function App() {
  return (
  <div>
- <div className="App">
+ <div className="forNavbar">
  <Navbar></Navbar>
  <img className="image" src={background} alt="background-image" />
  </div>
@@ -33,4 +33,3 @@ function App() {
  );
 }
 export default App;
-
diff --git a/src/Components/Navbar/Navbar.css b/src/Components/Navbar/Navbar.css
@@ -20,6 +20,11 @@
  cursor: pointer;
 }
 
+.navba-links 
+{
+ margin-top: 1rem;
+}
+
 .fa-react {
  margin-left: 0.5rem;
  font-size: 1.6rem;

diff --git a/src/Components/Navbar/Navbar.js b/src/Components/Navbar/Navbar.js
@@ -20,7 +20,7 @@ class Navbar extends Component {
  <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
  {MenuItems.map((item, index) => {
  return (
- <li key={index}>
+ <li className="navba-links" key={index}>
  <a className={item.cName} href={item.url}>
  {item.title}
  </a>