To center the navbar in Materialize CSS, you can use the following steps:
- Wrap the navbar inside a
divwith the classcontainer. - Add the class
center-alignto thenavelement to center its contents. - Optionally, you can use custom CSS to adjust the width of the navbar and logo.
Here’s an example:
htmlhtml>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
head>
<body>
<div class="container">
<nav class="center-align">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logoa>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Servicesa>li>
<li><a href="#">Contacta>li>
ul>
div>
nav>
div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">script>
body>
html>
This code centers the navbar and places the logo to the left. Adjust the content inside the navbar (ul and li elements) as needed for your website.
المزيد من المعلومات
لتوسيط شريط التنقل في Materialize CSS، يمكنك استخدام الطريقة التالية:
- ضع شريط التنقل داخل عنصر
divيحمل الفئةcontainer. - أضف الفئة
center-alignإلى عنصرnavلتوسيط محتوياته. - بشكل اختياري، يمكنك استخدام CSS المخصص لضبط عرض شريط التنقل وشعار الموقع.
هنا مثال:
htmlhtml>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
head>
<body>
<div class="container">
<nav class="center-align">
<div class="nav-wrapper">
<a href="#" class="brand-logo">الشعارa>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#">الرئيسيةa>li>
<li><a href="#">من نحنa>li>
<li><a href="#">الخدماتa>li>
<li><a href="#">اتصل بناa>li>
ul>
div>
nav>
div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">script>
body>
html>
هذا الكود يوسط شريط التنقل ويضع الشعار على اليسار. قم بتعديل المحتوى داخل شريط التنقل (ul وli العناصر) حسب احتياجات موقعك.
