Build a Reusable Mega Navbar - Step 2

JavaScript
1

Tell us what’s happening:

Hey guys can you help me with me with this react task? Thanks.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Navbar</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
     <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Navbar } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <Navbar />
      );
    </script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --white: #fff;
  --light-grey: #e1e0e0;
  --dark-purple: #7c0e7c;
  --black: #000;
}

body {
  background-color: var(--light-grey);
}

.navbar {
  background-color: var(--white);
}

.navbar ul {
  display: flex;
  justify-content: space-around;
}

.navbar ul li {
  list-style: none;
  border-radius: 4px;
}

.navbar ul li a {
  text-decoration: none;
  color: var(--black);
  padding: 10px;
  display: inline-block;
  width: 100%;
}

button {
  background: transparent;
  border: none;
  font-family: 'Times New Roman', Times, serif;
  padding: 10px;
  font-size: 1rem;
}

.navbar ul .nav-item a:hover {
  background-color: var(--dark-purple);
  color: var(--white);
}

button:hover {
  background-color: var(--dark-purple);
  color: var(--white);
}

.navbar ul .nav-item .sub-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 5%;
  transition: opacity 0.5s ease;
  display: block;
  background-color: var(--white);
}

@media (min-width: 768px) {
  .navbar ul .nav-item .sub-menu {
    right: 15%;
  }
}

@media (min-width: 1024px) {
  .navbar ul .nav-item .sub-menu {
    right: 13%;
  }
}

.navbar ul .nav-item:hover .sub-menu,
.navbar ul .nav-item:focus-within .sub-menu {
  visibility: visible;
  opacity: 1;
}

/* file: index.jsx */

{/* User Editable Region */}

import React from 'react';

// Define and export the Navbar component
const Navbar = () => {
  return (
    <nav className="navbar">
      {/* You will add content here in the next steps */}
    </nav>
  );
};

export default Navbar;


{/* User Editable Region */}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Challenge Information:

Build a Reusable Mega Navbar - Step 2

2

is that all the conent of your jsx file? I ask because the starting code is

export const Navbar = () => {

}

and you should write in there.

reset the step please and try again

3

show me how it should be formatted laid out

4

if you do not have that export reset the code and try again

5

Are you able to describe the problem that you’re having?

6

I’m having a problem with returning the navbar as per my script.

7

Can you speak a bit about what you’ve written and why?

Inside the Navbar component, return a nav element that has a className of navbar.

I can see you’ve done this, but you’ve added and changed many other things.

  {/* You will add content here in the next steps */}

What made you write this?

Try to reset the step and just follow the instructions. Don’t have AI write the code for you because it will be wrong and you won’t understand it enough to troubleshoot it.

8

How does this look?

const Navbar = () => {
return (

freeCodeCamp React Curriculum


I love learning with freeCodeCamp!



);
}.
?

9

How does it look?

You’ve opened way too many topics not have learned how to format your code in the forum yet.

It’s a bit strange you’ve gotten this far and cannot make one coherent comment regarding your code.