Navbar

To configure the navbar items in the JackCreative template, follow these steps:

Open your JackCreative template project.
Locate the components/Navbar.jsx file in your project directory.
Open the components/Navbar.jsx file using a text editor or integrated development environment (IDE).

By following these steps, you will have the Navbar.jsx file open and ready for configuration. This file contains the code responsible for the navbar items in the JackCreative template. You can proceed with the next steps to configure specific navbar items such as the logo navbar button link menu items etc.

Logo

To set the logo of the website displayed on the navbar, follow these steps for each logo variant:

Homepage and HomeTwo Logo

Find the following code and change the src attribute of the Image component:

<Image
  src="/images/logo.svg"
  alt="Jack"
  height={27}
  width={160}
  className="logo"
/>

Replace /images/logo.svg with the desired image path or URL.

HomeOne Logo

Find the following code and change the src attribute of the Image components:

<>
  <Image
    src="/images/logo.svg"
    alt="Jack"
    height={27}
    width={160}
    className="logo"
  />
  <Image
    src="/images/logo-white.svg"
    alt="Jack"
    height={27}
    width={160}
    className="white-logo"
  />
</>

Replace /images/logo.svg with the desired image path or URL for the regular logo, and replace /images/logo-white.svg with the desired image path or URL for the white logo.

Remember to add the className="white-logo" to the second Image component for the white logo.

After making the changes, save the file, and the new logo images will be displayed in the navbar based on the chosen logo variant.

Navbar Button Link

To replace the default button link with your desired URL or route, modify the href attribute of the Link component in the components/Navbar.jsx file. Here's the code snippet you need to update:

<Link href="/your-desired-url-or-route" className="btn btn-sm btn-links w-100"></Link>

Replace /your-desired-url-or-route with the actual URL or route you want for the button link. For example, if you want to link to the "contact" page, you would update the code like this:

<Link href="/contact" className="btn btn-sm btn-links w-100"></Link>

Menu Items

To add a new menu item to the navbar, follow these steps:

Locate the <ul> element with the navbar-nav class in the components/Navbar.jsx file. It should have a structure similar to the one mentioned in the instruction.
Inside the <ul> element, add a new <li> element to represent the menu item. Here's an example:

<li className="nav-item">
  <Link className="nav-link" href="/your-menu-item-url">
    Your Menu Item
  </Link>
</li>

Replace /your-menu-item-url with the desired URL or route for your menu item. For example, if you want to link to the "services" page, you would update the code like this:

<li className="nav-item">
  <Link className="nav-link" href="/services">
    Services
  </Link>
</li>

Repeat these steps to add as many menu items as needed.

After adding the menu items, save the file, and the new menu items will be displayed in the navbar with the respective URLs or routes you provided.

Sub Menu Items

To add sub-menu items to the navbar dropdown menu in the JackCreative template, follow these steps:

Open the components/Navbar.jsx file in your JackCreative template project.
Locate the code block that represents the parent menu item with the dropdown functionality. It should have a structure similar to the following:

<li className="nav-item dropdown">
  <a
    className={dropdown ? "nav-link dropdown-toggle" : "nav-link dropdown-toggle show"}
    onClick={() => {
      openDropdown(!dropdown);
    }}
    role="button"
    data-bs-toggle="dropdown"
  >
    Home
    <CaretDown size={16} />
  </a>
  <ul className={dropdown ? "dropdown-menu show" : "dropdown-menu"}>
    {/* Sub menu items go here */}
  </ul>
</li>

Inside the <ul> element representing the dropdown menu, add additional <li> elements to represent the sub-menu items. Each <li> element should contain a <Link> component with the desired URL and display text. Here's an example with two sub-menu items:

<li className="nav-item dropdown">
  <a
    className={dropdown ? "nav-link dropdown-toggle" : "nav-link dropdown-toggle show"}
    onClick={() => {
      openDropdown(!dropdown);
    }}
    role="button"
    data-bs-toggle="dropdown"
  >
    Home
    <CaretDown size={16} />
  </a>
  <ul className={dropdown ? "dropdown-menu show" : "dropdown-menu"}>
    <li className="dropdown-megamenu-conatiner ">
      <ul className="list-unstyled ">
        <li className="dropdown-megamenu-column-items">
          <Link
            href="/"
            className="dropdown-item"
          >
            Product Designer
          </Link>
        </li>
        <li className="dropdown-megamenu-column-items">
          <Link
            href="/homeOne"
            className="dropdown-item "
          >
            Developer
          </Link>
        </li>
        <li className="dropdown-megamenu-column-items">
          <Link
            href="/homeTwo"
            className="dropdown-item "
          >
            Graphic Designer
          </Link>
        </li>
      </ul>
    </li>
  </ul>
</li>

Customize the href attribute of each <Link> component with the desired URLs for your sub-menu items.
Customize the display text within the <Link> component to represent the names of your sub-menu items.
Save the file, and the sub-menu items should now appear in the dropdown menu when you hover over the parent menu item in the navbar.

By following these steps, you can add sub-menu items to the navbar dropdown menu in the JackCreative template.

Create a New Page Footer