Как сделать автобир Навбар - PullRequest
0 голосов
/ 31 марта 2020

У меня проблема с моей навигационной панелью. Некоторые кнопки отображаются, если я вошел в систему как администратор, а некоторые кнопки показаны для клиентов. Проблема в том, что когда я вошел в систему как администратор, моя навигационная панель имеет высокий или маленький размер, зависит от того, какую ширину я установил css. есть другая ширина. Спасибо за помощь.

<style>
html,
body {
  height: auto;
}

body {
  font-family: "Lato", sans-serif;
  background-color: <?php echo $website_background_color; ?>;
  background-size: cover;

}

.navbar {
  display: flex;
  margin: auto;
  padding: 0;
  margin-top: 15px;
  list-style-type: none;
  background: <?php echo $website_button_color; ?>;
  width: 1000px;
  border-radius: 5px;
  overflow: hidden;
  position: static;
  top: 45px;
  bottom: auto;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}
.navbar li {
  display: inline-block;
  padding: 15px 18px;
}
.navbar li.right {
  float: right;
}
.navbar li a {
  color: #e8f1f2;
  text-decoration: none;
  font-size: 16px;
}
.navbar li a span.menu {
  display: flex;
  width: 25px;
  height: 3px;
  background: #e8f1f2;
  position: relative;
  top: 7px;
  flex: 1;
}

.navbar li a span.menu::before, .navbar li a span.menu::after {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  background: #e8f1f2;
  position: absolute;
  left: 0;
  right: auto;
  bottom: auto;
    flex: 1;
}
.navbar li a span.menu::before {
  top: -8px;
}
.navbar li a span.menu::after {
  top: 8px;
}


.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


@font-face {
   font-family: logo-font;
   src: url(assets/logo-font-m.otf);
   src: url(assets/logo-font-m.eot);
   src: url(assets/logo-font-m.ttf);
}


.logo-font {
   font-family: logo-font;
   color: <?php echo $website_button_color; ?>;
   text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
}
</style>



</head>

<body>

<center>
<div style="padding-top: 25px;">
<font size="10" class="logo-font no-select"><?php echo $website_name; ?></font>
</div>
</center>

  <ul class="navbar">
      <li>
         <a href="index.php"><i class="fas fa-home"></i> Home</a>
      </li>
      <li>
         <a href="regions.php"><i class="fa fa-list-alt" aria-hidden="true"></i> Regions</a>
      </li>
      <li>
         <a href="search.php"><i class="fa fa-list-alt" aria-hidden="true"></i> Search</a>
      </li>
      <li>
          <a href="request.php"><i class="fa fa-list-alt" aria-hidden="true"></i> Request</a>
      </li>
      <li>
         <a href="contact-us.php"><i class="fas fa-info"></i> Contact Us</a>
      </li>
      <li>
         <a href="access-order.php"><i class="fas fa-eye"></i> Access Order</a>
      </li>


<?php 
if ($_SESSION['admin_logged_in'] == "true"){
  echo '<li><a href="admin-panel.php"><i class="fas fa-lock"></i> Admin Panel</a></li>';
  echo '<li><a href="admin-logout.php"><i class="fas fa-sign-out-alt"></i> Admin Logout</a></li>';
}
?>

1 Ответ

0 голосов
/ 31 марта 2020

Если можно немного изменить HTML, одно из решений может заключаться в том, чтобы обернуть ваш ul.navbar в другой элемент (например, nav) следующим образом (удаленный контент для демонстрационной цели):

<nav>
    <ul class="navbar">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

Затем вы удалили бы display: flex и width: 1000px из .navbar и добавили css к .navbar вместо:

display: inline-block;
width: auto;

Теперь вы примените следующие css к новый элемент nav, чтобы сделать его гибким контейнером и оправдать его содержание:

nav {
    display: flex;
    width: 100%;
    justify-content: center;
}

Теперь .navbar всегда так же широк, как и его содержимое.

Вот рабочий JSFiddle, где я применил изменения к предоставленному вами коду: https://jsfiddle.net/mnqs31cd/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...