Question 260000 in Html Question posted in
Some basic documentation can be found here.

Html – navbar in css with profile on right side and links on the left

I’m trying to make a navigation bar on my website with react and css but I’m not able to get the profile button on the right side of my screen. I’m only able to get it to the middle or far off my screen.
This is my css for the navigation bar

.navbar {
  width: 100%;
  flex-flow: row;
  height: 70px;
  background-color: var(--color-surface-200);
  display: Flex;
  justify-content: space-between;
  position: sticky;
  top: 0px;
}
.rightbar {
  position: absolute; 
  right: 0px;
}
 .leftbar {
  justify-content: start;
}

.navbar a {
  margin-left: 20px;
  text-decoration: none;
  color: var(--color-primary-100);
}

here is the react/html part:

<div className="navbar">
            {!authState.status ? (
              <div>
                <div class="leftbar">
                  <Link to="/"> HomePage</Link>
                  <Link to="/login"> Login </Link>
                  <Link to="/registration"> Registration </Link>
                </div>
                <div class="rightbar"></div>
              </div>
            ) : (
              <div>
                <div class="leftbar">
                  <Link to="/">HomePage</Link>
                  <Link to="/createpost">Create a post</Link>
                </div>
                <div class="rightbar">
                {Userdata ? (
                  <div class="dropdown">
                    <button class="dropbtn">
                      <Image
                        style={{ width: 35, height: 35, borderRadius: "50%" }}
                        source={{
                          uri: `https://server.fillyourfreetime.com/${Userdata.pfp}`,
                        }}
                      />{" "}
                      {Userdata.username}
                    </button>
                    <div class="dropdown-content">
                      <Link to={`/profile/${Userdata.id}`}>profile</Link>
                      <Link to="/editprofile">edit profile</Link>
                      <Link onClick={logout}>logout</Link>
                    </div>
                  </div>
                ) : (
                  <div></div>
                )}
                </div>
              </div>
            )}
          </div>

I tried using the following in the css:
justify-content: space-between
justify-content: right
justify-content: end

.rightbar {
  with:50%
}
 .leftbar {
  width: 50%
}

but nothing seems to work can someone please help?

Tags:

2

Answers


  1. 0

    You’ll see on the top HTML example that you have an extra div wrapping the rightbar and leftbar. So, the flexbox is doing exactly what you tell it to do because there is only one element inside of it. If you remove the div like I did on the second example, it now see’s two divs, and spaces them apart like you would expect. Running the code snippet will give you a better visual of what it is doing. I hope this helps..

    .navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  background-color: var(--color-surface-200);
  border: 1px solid red;
}
    <div class='navbar'>
  <div> <!--you need to remove this div-->
    <div class="leftbar">
      <Link to="/"> HomePage</Link>
      <Link to="/login"> Login </Link>
      <Link to="/registration"> Registration </Link>
    </div>
    <div class="rightbar">Profile</div>
  </div><!--you need to remove this div-->
</div>

<!--And do this instead -->

<div class='navbar'>
  <div class="leftbar">
    <Link to="/"> HomePage</Link>
    <Link to="/login"> Login </Link>
    <Link to="/registration"> Registration </Link>
  </div>
  <div class="rightbar">Profile</div>
</div>
    Login or Signup to reply.
  2. 0

    You can use the following code, which will give you the desired style.
    I am using AppBar from MUI.

    import {
  Box,
  AppBar,
  Toolbar,
  Typography,
} from "@mui/material";
import { Link } from "react-router-dom";
import AccountBalanceIcon from "@mui/icons-material/AccountBalance";

export type LinkType= {
  label: string;
  path: string;
};

const linksDetails: Array<LinkType> = [
  { label: "home", path: "/" },
  { label: "shop", path: "/shop" },
  { label: "settings", path: "/user-settings" },
];
const currentUser = { userId: 1111 };
export const Nav = () => {
  return (
    <AppBar
      sx={{ position: "relative", paddingRight: "0px !important" }}
    >
      <Toolbar>
        <Box className="logo-container">
          <Link to="/">
            <AccountBalanceIcon /> {/* logo */}
          </Link>
        </Box>
        <Box className="link-container">
          <Box>
            {linksDetails.map((link, index) => (
              <Link key={index} to={link.path}>
                {link.label}
              </Link>
            ))}
          </Box>
          <Typography
            className="language-menu-btn"
            onClick={() => console.log("change the language")}
            color="primary.main"
          >
            Language
          </Typography>

          {currentUser ? (
            <Box onClick={() => console.log("handle signout")}>
              <Link to="auth">Signout</Link>
            </Box>
          ) : (
            <Box>
              <Link to="auth">signin</Link>
            </Box>
          )}
        </Box>
      </Toolbar>
    </AppBar>
  );
};

    With the following CSS:

    .logo-container {
  flex-grow: 1;
}

.link-container {
  flex-grow: 2;
  display: flex;
  justify-content: space-between;
  a {
    margin: 0px 10px;
    color: #fff;
    transition: color 0.2s ease-in;
    &:hover {
      color: #e76712;
    }
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search