Question 73718 in Reactjs Question posted in
The new location for the React Documentation can be found here.

CSS – How to make nav bar link active background color wider than the text – Reactjs

I’m working on a navbar for CSS and I’ve gotten it working the way I want however the active state shows the background color that has the same width as the text itself. I feel like this is basic but I’ve been searching around for a couple of hours and have not found any answers to this. Ideally, I’d like the background color to have a little bit more width than the text itself. When I use the width property in css, it seems like it hardcodes the width and pays no attention to the width of the text.

I’m using react and bootstrap.

It currently looks like the image below. As you can see the background color is the same width as the navlink’s text "about".

enter image description here

how can I make it have a little bit of breathing room like in the image below? In this example, there is space between the ends of the text and the background color.

Any and all help/direction is appreciated.

enter image description here

Here is my js for the nav item:

import React from "react";
import "./NaviBar3.css";

function NaviBar3() {
  return (
    <div className="NaviBarDiv sticky-top">
      <nav className="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <a
          href="/"
          className="d-flex align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"
          data-to-scrollspy-id="home"
        >
          <span className="fs-2">CM</span>
        </a>

        <a
          href="/"
          className="nav-link fs-5"
          data-to-scrollspy-id="about"
        >
          About
        </a>
        <a
          href="#projects"
          className="nav-link fs-5"
          data-to-scrollspy-id="projects"
        >
          Projects
        </a>
      </nav>
    </div>
  );
}

export default NaviBar3;

Here is my css code:

.NaviBarDiv {

  background-color: #282c34;
}
.active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.nav-link {
  margin-left: 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    @Mohammad Hasibul Hasan's answer led me to this. Although his answer didn't work, I started messing around with the padding with bootstrap and this worked:

    import React from "react";
import "./NaviBar3.css";

function NaviBar3() {
  return (
    <div className="NaviBarDiv sticky-top">
      {/* <nav className="d-flex flex-wrap justify-content-center border-bottom"> */}
      <nav className="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <a
          href="/"
          className="d-flex align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"
          data-to-scrollspy-id="home"
        >
          <span className="fs-2">CM</span>
        </a>

        <a
          href="/"
          className="nav-link fs-5 px-3 pt-1"
          data-to-scrollspy-id="about"
        >
          About
        </a>
        <a
          href="#projects"
          className="nav-link fs-5 px-3 pt-1"
          data-to-scrollspy-id="projects"
        >
          Projects
        </a>
      </nav>
    </div>
  );
}

export default NaviBar3;

    It now looks like this: enter image description here


  2. 0

    try use to "padding" in css

    .nav-link {
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
    Login or Signup to reply.
  3. 0

    You can add padding on your active link:

    .active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 1em;
}

    or even use bootstraps padding in classname like this:

    className="d-flex active-scroll-spy p-4 align-items-center mb-3 mx-5 me-md-auto text-light text-decoration-none"
    Login or Signup to reply.
  4. 0

    Just add padding to .active-scroll-spy class

    .active-scroll-spy {
  height: 4ex;
  background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 0.5em 1em; /* Adding padding to left and right sides */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search