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

Tijmi
October 6, 2023
133 views
0 votes
2 Answers

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?

Answers

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>

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;
    }
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers