Navbar

Configuring Navbar Items are very straightforward. To configure the navbar items in the RealStatic template, follow these steps:

Logo

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

Open your RealStatic 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).
Find the following code and change the src attribute of the Image component:

<Image
  src="/images/logo.svg"
  alt="logo"
  height={35}
  width={129}
/>

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

Navbar Contact Number

To replace the contact number with your desired number , modify the href="tel:2329872" attribute of the <a> component in the components/Navbar.jsx file. Here's the code snippet you need to update:

<a href="tel:2329872 " className="navbar-number align-items-center">
  <svg
    width={6}
    height={7}
    viewBox="0 0 6 7"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx={3} cy="3.5" r={3} fill="#417086" />
  </svg>
  <Phone size={24} weight="bold" />
  (546) 232 - 9872
</a>

Navbar Button Link

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

<a
  className="btn btn-small btn-outline"
  data-bs-toggle="modal"
  href="#login"
  role="button"
>
  Log In
</a>

Menu Items

Open the data/data.js file in your RealStatic template project.
Locate the const menuData variable in the data/data.js file. This variable holds an array of objects representing the navbar items. Customize the menu items by editing the objects within the menuData array. Each object represents a menu item and has the following properties:
id: An identifier for the menu item.
parent: The title of the menu item displayed on the navbar.
link: The path or URL the menu item should navigate to.

{
  id: 2,
  parent: "About",
  link: "/about",
},

Sub Menu Items

To add a submenu item, create a new chlidren array inside a menu item object where you want to add the submenu. Inside the chlidren array, add objects with the same properties as regular menu items (i.e., id, parent, link).

children: [
  {
    id: 5.1,
    parent: "Blog",
    link: "/blogs",
  },
],

Here's an example of adding a new menu item and a submenu item:

{
  id: 1,
  parent: "Home",
  megamenu: false,
  children: [
    {
      id: 1.1,
      parent: "Home Page 1",
      link: "/",
    },
    {
      id: 1.2,
      parent: "Home Page 2",
      link: "/homepage2",
    },
  ],
},

Note: To add two column submenu add megamenu: true on Main menu and megamenu: false to add single column submenu.

By following these steps and customizing the menuData array in the data/data.js file, you can configure the navbar items in the RealStatic template according to your preferences.

Create a New Page Footer