Bunu Nasıl Yapabilirim OpenCart

Merhaba arkadaşlar,

Her sayfada görünecek şekilde bu şekilde bar nasıl yapabilirim?

kodlardan kopyalayıp tüm sayfalara eklemeniz lazım

Kullandığınız tema nedir? Genelde journal teması tercih ediliyor, journal’da yerleşik olarak bu modül mevcut.

Temada yok maalesef, modül vardır belki diye konu açtım.

Merhaba,

header.php içerisinde </head> etiketinden önce ;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

Kodunu ekleyiniz.

Daha sonra aşağıdaki kodları footer.php dosyasında </body> etiketinden önce ekleyiniz.

<nav class="nav">
  <a href="#" class="nav__link">
    <i class="fa fa-home"></i>
    <span class="nav__text">Ana Sayfa</span>
  </a>
  <a href="#" class="nav__link">
    <i class="fa fa-user"></i>
    <span class="nav__text">Üye Girişi</span>
  </a>
  <a href="#" class="nav__link">
    <i class="fa fa-edit"></i>
    <span class="nav__text">Kayıt Ol</span>
  </a>
  <a href="#" class="nav__link">
    <i class="fab fa-instagram"></i>
    <span class="nav__text">Instagram</span>
  </a>
  <a href="#" class="nav__link">
    <i class="fab fa-whatsapp"></i>
    <span class="nav__text">WhatsApp</span>
  </a>
</nav>

Sonraki adımda ise css/style.css klasörünüz varsa onun içerisine aşağıdaki kodları ekleyin.
Eğer style.css dosyanız yok ya da farklı bir isimdeyse onun içine ekleyebilir ya da siz oluşturabilirsiniz.

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    background-color: #eeeeee;
}

.nav__link--active {
    color: #009578;
}

.nav__icon {
    font-size: 18px;
}