Kevin Powell - Community•14mo ago

side nav overflow problem

import React from "react";
import NavbarCss from "./css/Navbar.module.css";


export default function Navbar() {
  return (
      <div className={NavbarCss.navbar}>
        <div className={NavbarCss.lowerNavbar}>
          <div className={NavbarCss.upperNavbar}>
            <div className={NavbarCss.leftUpperNav}>
              <div className="flex center">
                <span class="material-symbols-outlined">mail</span>
                <p>[email protected]</p>
              </div>
              <div className="flex center">
                <span class="material-symbols-outlined">call</span>
                <p>0316 5546622</p>
              </div>
            </div>
            <div className={NavbarCss.rightUpperNav}>
              <img className={NavbarCss.facebook} src="facebook.webp" />
              <img className={NavbarCss.google} src="google.webp" />
              <img className={NavbarCss.twitter} src="twitter.webp" />
            </div>
          </div>
          <div className={NavbarCss.navigation}>
            <div className={NavbarCss.navImg}>
              <img className={NavbarCss.logo} src="logo.webp" />
              <p>PRIVATE EYE BOUNCERS</p>
            </div>
            <div className={NavbarCss.navText}>
              <ul>
                <li>HOME</li>
                <li>SERVICES</li>
                <li>ABOUT US</li>
                <li>CONTACT</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  );
}

import React from "react";
import NavbarCss from "./css/Navbar.module.css";


export default function Navbar() {
  return (
      <div className={NavbarCss.navbar}>
        <div className={NavbarCss.lowerNavbar}>
          <div className={NavbarCss.upperNavbar}>
            <div className={NavbarCss.leftUpperNav}>
              <div className="flex center">
                <span class="material-symbols-outlined">mail</span>
                <p>[email protected]</p>
              </div>
              <div className="flex center">
                <span class="material-symbols-outlined">call</span>
                <p>0316 5546622</p>
              </div>
            </div>
            <div className={NavbarCss.rightUpperNav}>
              <img className={NavbarCss.facebook} src="facebook.webp" />
              <img className={NavbarCss.google} src="google.webp" />
              <img className={NavbarCss.twitter} src="twitter.webp" />
            </div>
          </div>
          <div className={NavbarCss.navigation}>
            <div className={NavbarCss.navImg}>
              <img className={NavbarCss.logo} src="logo.webp" />
              <p>PRIVATE EYE BOUNCERS</p>
            </div>
            <div className={NavbarCss.navText}>
              <ul>
                <li>HOME</li>
                <li>SERVICES</li>
                <li>ABOUT US</li>
                <li>CONTACT</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  );
}

5 Replies

Anonymous DEV•14mo ago

side nav is not working as it should and i am having this warning webpack compiled with 1 warning One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

Anonymous DEV•14mo ago

message.txt

b1mind•14mo ago

Few things, if you don't have to be using CRApp I would try out Vite/Next/Remix as all are more modern solutions (react docs even tell you this) your nav should be in a <nav> element lastly I would avoid using vh or setting strict heights on elements period. Its hard to tell whats going on without a working example though. You can try putting it in a stackblitz and maybe we can help more. Or abstract the issue into html/css and put in a codepen.

Anonymous DEV•14mo ago

what are these use for? i dont know about them

b1mind•14mo ago

Look them up, also read the getting started React docs

Gaming

Programming

side nav overflow problem