Мне нужна помощь в выравнивании моих ссылок в Navbar - PullRequest
Новая
       0

Мне нужна помощь в выравнивании моих ссылок в Navbar

0 голосов
/ 03 февраля 2020

Посоветуйте, пожалуйста, как выровнять мои навигационные ссылки в моем названии. Я также хотел бы, чтобы ссылки navbar были разнесены. Когда я просматриваю ссылки на своем телефоне, они довольно близки друг к другу. Я бы хотел, чтобы мой заголовок был слева, а ссылки справа, с некоторыми отступами. Пожалуйста, смотрите мой код ниже.

Спасибо!

HTML 

</head>

<body>

<header id="header">
   <div id="logo">
      <span>My Site</span>
   </div>

   <nav id="nav-bar">
      <ul>
         <li><a class="nav-link" href="#"><b>About</b></a></li>
         <li><a class="nav-link" href="#"><b>Work</b></a></li>
         <li><a class="nav-link" href="#"><b>Blog</b></a></li>

      </ul>
   </nav>
</header>

CSS 

#header {
   top: 0;
   left: 0;
   right: 0;
   position: relative;
   background-color: #707793;
   display: flex;
   flex-direction: column;
   align-items: center;

   font-family: "Pacifico", sans-serif;
}

#logo {
   display: flex;
   flex-direction: column;
   align-items: center;
}
#logo span {
   color: #d9fff6;
   text-shadow: 2px 2px 5px #70fad9;
   font-size: 30px;
}

#logo img {
   width: 75px;
   height: 60px;
}


#nav-bar ul {
   padding: 0;
   height: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   list-style-type: none;
}

#nav-bar .nav-link {
   color: #f6f7f8;
   padding: 0;
   text-decoration: none;
   font-size: 20px;
   font-family: "Handlee", sans-serif;
   text-shadow: 2px 2px 5px #bec1ce;   

}

@media only screen and (min-width: 460px) {
   #logo {
      flex-direction: row;
   }
   #logo img {
      width: 85px;
      height: 70px;
   }
   #logo span {
      font-size: 25px;
      margin-left: 20px;
   }
   #nav-bar .nav-link {
      padding: 5px 30px;
   }
}


@media only screen and (min-width: 900px) {
   #header{
      flex-direction: row;
      justify-content: space-around;
   }
   #nav-bar .nav-link {
      padding: 0px 20px;
   }
}

@media only screen and (min-width: 992px) {
   #logo span {
      font-size: 30px;
   }

   #logo img {
      width: 100px;
      height: 85px;
   }
}

1 Ответ

0 голосов
/ 04 февраля 2020

Можете ли вы попробовать с этим кодом , надеюсь, он разрешит ваш запрос. Мы просто добавляем один медиазапрос для мобильного разрешения с разрешением 460 пикселей, вы можете изменить это значение в зависимости от ваших требований. 

#header {
  top: 0;
  left: 0;
  right: 0;
  position: relative;
  background-color: #707793;
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: "Pacifico", sans-serif;
}

#logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#logo span {
  color: #d9fff6;
  text-shadow: 2px 2px 5px #70fad9;
  font-size: 30px;
}

#logo img {
  width: 75px;
  height: 60px;
}


#nav-bar ul {
  padding: 0;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}

#nav-bar .nav-link {
  color: #f6f7f8;
  padding: 0;
  text-decoration: none;
  font-size: 20px;
  font-family: "Handlee", sans-serif;
  text-shadow: 2px 2px 5px #bec1ce;

}

@media only screen and (min-width: 460px) {
  #logo {
    flex-direction: row;
  }

  #logo img {
    width: 85px;
    height: 70px;
  }

  #logo span {
    font-size: 25px;
    margin-left: 20px;
  }

  #nav-bar .nav-link {
    padding: 5px 30px;
  }
}


@media only screen and (min-width: 900px) {
  #header {
    flex-direction: row;
    justify-content: space-around;
  }

  #nav-bar .nav-link {
    padding: 0px 20px;
  }
}

@media only screen and (min-width: 992px) {
  #logo span {
    font-size: 30px;
  }

  #logo img {
    width: 100px;
    height: 85px;
  }
}


@media only screen and (max-width: 460px) {
  #header{
    flex-direction: row;
    padding: 0px 10px;
    justify-content: space-between;
  }
  #nav-bar .nav-link {
    padding: 0 7px;
    font-size: 18px;
   }
   #nav-bar li:last-child .nav-link {
    padding-right: 0;
   }
}
<header id="header">
   <div id="logo">
      <span>My Site</span>
   </div>

   <nav id="nav-bar">
      <ul>
         <li><a class="nav-link" href="#"><b>About</b></a></li>
         <li><a class="nav-link" href="#"><b>Work</b></a></li>
         <li><a class="nav-link" href="#"><b>Blog</b></a></li>

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

Нет похожих вопросов

...