Question

我很感激我的导航栏提供了一些帮助，它似乎与平板电脑及其下方配合得很好，但徽标在台式机上非常压扁，直到它在移动设备上工作正常 - 有人能指出我在正确的方向上解决这个问题？徽标会更大，但它现在只是一个占位符（我已经测试了其他徽标，它似乎给出了相同的结果）。

此外，如果有人可以给我任何关于如何在点击时使用搜索徽标的说明，它会打开一个搜索字段（如果可能的话，没有JS！我目前已经使用jQuery但是没有它！）

我还添加了一个大断点（1024px），直到它进入移动视图，因为导航项目不适合小调整大小 - 有没有人有任何关于更好地格式化导航的建议更清洁？

这里有几个问题，但希望它有意义！

提前多多感谢！：）

桌面图片 image description

较小的设备图像 image description

＆＃13;

$(document).ready(function() {

  $(".search-logo").on('click', function() {
    $(".search-bar").toggle();

  });
});

＆＃13;

body {
  margin: 0;
  font-family: Arial;
}

.button {
  padding: 15px 25px;
  font-size: 1.2vmin;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: black;
  background-color: #fff;
  border: none;
  border-radius: 35px;
  border: 1px solid black;
}

.search-logo {
  border: none;
  background-color: transparent;
  outline: none;
}

.search-bar {
  display: none;
}

.search-icon {
  font-size: 25px !important; //Due to icon inheriting from external css
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header-right {
  float: right;
  position: absolute;
  right: 20%;
}

@media screen and (max-width: 1024px) {
  .header a {
    float: none;
    display: block;
    text-align: center;
  }
  .header a.logo {
    text-align: center;
    width: 100%;
  }
  .header-right {
    float: none;
    position: static;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/javascript.js">
  </script>
</head>



<body>

  <div class="header">
    <a href="#" class="logo"></a>
    <div class="header-right">
      <a href="#">ABOUT US</a>
      <a href="#">OUR WORK</a>
      <a href="#">NEWS</a>
      <a href="#">CAREER</a>
      <a href="#">CONTACT</a>
      <a>
        <button type="submit" class="search-logo"><i class="fa fa-search search-icon"></i></button>
        <input type="text" placeholder="Search.." name="search" class="search-bar">
      </a>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

Art Direction就是你所追求的。但是，这可能很快变得笨拙。

在您的情况下，您可以简单地使用带有media queries的弹性工具箱来完成工作。

响应式导航格式问题

1 个答案: