Нет UL-тегов для navbar - Невозможно центрировать ссылки на странице - PullRequest
Новая
       1

Нет UL-тегов для navbar - Невозможно центрировать ссылки на странице

0 голосов
/ 11 января 2019

Мне было поручено центрировать ссылки навигационной панели на Professorpooch.com , но я заметил, что в коде topnav нет тегов ul, только теги.

Мне удалось центрировать ссылки на рабочем столе, используя .topnav {display: flex; align-items: center; justify-content: center;}, но он разваливается на маленьких экранах, поэтому я удалил его. Я думаю, я не уверен, как правильно настроить медиа-запросы. Предложения с благодарностью. 

<div class="topnav" id="myTopnav">
    <a href="/">Home</a>
<div class="dropdown">
    <button class="dropbtn">About 
        <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <a href="Meet.htm">Meet the Professor</a>
    <a href="Resume-Bio.htm">Resume-Bio</a>
</div>
</div>
<div class="dropdown">
    <button class="dropbtn">Music Business Education 
        <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <a href="Education.htm">Books & Courses Info</a>
    <a href="Book.htm">The Music Biz Book</a>
    <a href="Managing.htm">Artist Development & Management Course</a>
    <a href="Publishing.htm">Songwriters & Music Publishing Course</a>
    <a href="Producing.htm">Producing, Production Companies & Indie     Labels Course</a>
    <a href="music-business-complete.htm">Music Business Education     Curriculum</a>
</div>
</div> 
    <a href="https://professorpooch.com/gdcac/">Self-Empowerment</a>
    <a href="Services.htm">Career Guidance</a>
<div class="dropdown">
    <button class="dropbtn">Contract Services 
        <i class="fa fa-caret-down"></i>
    </button>
<div class="dropdown-content">
    <a href="contract-services.htm">Regarding Contracts</a>
    <a href="personalized-contractual-services.htm">Personalized Contract Services</a>
    <a href="music-business-contracts-descriptions.pdf">Download Contract Descriptions PDF</a>
</div>
</div>
    <a href="Library.htm">Free Library</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>


.topnav {
  overflow: hidden;
  background-color: #b40001;
  padding-left: 10%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 17px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #f0f0f0;
  color: #000;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1068px) {
  .topnav {padding-left: 18px;}
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;  
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1068px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

1 Ответ

0 голосов
/ 11 января 2019

ОК, никогда не сдавайся - никогда не сдавайся, верно? Похоже, я исправил это, добавив новый медиа-запрос: 

 @media screen and (min-width: 780px) {
  .topnav {
    display: flex; 
    align-items: center; 
    justify-content: center;
  }
}
...