Question 205680 in Html Question posted in
Some basic documentation can be found here.

Html – Can't make my unordered list be responsive when expanding the screen

I’m building a website that has a navigation menu on it’s homepage, when the menu options get hovered, and if they have an arrow, they would also show a submenu with more options below them, here’s the image for examplification (https://phpout.com/wp-content/uploads/2023/07/xkKMs.png)
the submenu is my biggest problem for responsivity, i can’t make it always 100% aligned with the menu option, when the screen size changes, the submenu options would always unmatch the menu option
heres my html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Yazigi Tech</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v17.0" nonce="Aw1TIrLL"></script>
  <!-Navigation Bar->
  <nav>
    <img src="img/logo-3.png" class="nav-logo">
    <ul>
      <li><a href="#">Página inicial</a></li>
      <li class="has-submenu">
        <a href="#">Sobre</a>
        <ul class="sub-menu">
          <li><a href="#">Sobre mim</a></li>
          <li><a href="#">Sobre nós</a></li>
        </ul>
      </li>
      <li class="has-submenu">
      <a href="#">Serviços</a>
      <ul class="sub-menu">
        <li><a href="#">Criação de websites</a></li>
        <li><a href="#">Montagem e limpeza de PC</a></li>
      </ul>
    </li>
      <li><a href="#">Contato</a></li>
    </ul>
    <div class="fb-tt-buttons">
      <div class="fb-like" data-href="" data-width="50" data-layout="button" data-action="like" data-size="small" data-share=""></div>
      <div class="tt-button"><a href="https://twitter.com/jorge?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-lang="pt" data-dnt="true" data-show-count="false"></a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div>
  </div>
  </nav>
 
  <!-1024x768 Banner->
  <img src="img/homepage-banner.png" alt="Meu banner" class="banner-img">
  <div class="homepage-button-container">
  <button type="button" class="home-main-buttons" role="button">Ver meu trabalho</button>
  <button type="button" class="home-main-buttons">Começar um projeto</button>
  </div>
  <div class="footer">
  <img src="img/logo-3.png" alt="Minha logo" class="footer-logo">
  <div class="footer-info">
    Yazigi Tech software e manutenção de computadores<br>
    Editor da página: Victor Yazigi<br>
    Designer da página: Sabrina Leonel</div>
  </div>
</body>
</html>

and that’s the css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

html, body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  margin: 0 auto;
  padding: 0;
}

a {
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

nav {
  position: sticky;
  top: 0;
  width: 100%;
  height: 9vh;
  min-height: 3.5rem;
  z-index: 100;
  text-transform: capitalize;
  background-color: black;
}

.nav-logo {
  position:absolute;
  float:left;
  transform: translateY(-32%);
  width: 9.375rem;
  height:9.375rem;
}

nav ul {
  list-style: none;
  margin:0 20vh; 
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  position: relative;
}

nav li {
  flex: 1;
  position: relative;
}

nav a {
  display: flex;
  float:top;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
  height: 9vh;
  width: 100%;
}

  nav a:hover {
    background-color: #FF7415;
}
  nav .has-submenu {
    position: relative;
  }

  nav .has-submenu .sub-menu {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-138px); 
    background-color: black;
    white-space: nowrap;
  }
  
  nav .has-submenu:hover .sub-menu {
    display: block;
    position: absolute;
  }

  nav .has-submenu:hover .sub-menu a {
    background-color: black;
    transition: background-color 0.3s ease;
  }
  
  nav .has-submenu .sub-menu a:hover {
    background-color: #FF7415;
  }

  nav ul li {
    position: relative;
  }

  nav ul li:hover .sub-menu {
    display: block;
  }

  nav .has-submenu:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%) rotate(-45deg);
    border: solid white;
    border-width: 0 0.0625rem 0.0625rem 0;
    display: inline-block;
    padding: 0.1875rem;
    pointer-events: none;
    transition: transform 0.3s ease;
  }
  
  nav .has-submenu:hover:after {
    transform: translateY(-50%) rotate(45deg);
  }

.fb-tt-buttons {
  position: inherit;
  display: grid;
  margin:0;
  padding:0;
  bottom:94.5%;
  right:2%;
  float:right;
}

.tt-button{
  position: inherit;
  transform: translateX(8%);
}

.banner-img {
  position:relative;
}

.homepage-button-container {
  display: flex;
  position: relative;
  transform: translateY(-500%);
  left:3%;
  z-index: 10;
}

@media (max-width: 1150px) {
  .homepage-button-container {
    top:100px;
  }
}

@media (max-width: 990px) {
  .homepage-button-container {
    top:100px;
    transform: translateY(-500%) translateX(-5%);
  }
}

@media (max-width: 890px) {
  .homepage-button-container {
    top:100px;
    transform: translateY(-500%) translateX(-7%);
  }
}


.home-main-buttons {
  align-items: center;
  margin-inline:2rem;
  appearance: none;
  background-color: #FF7415;
  border-radius: 0.5rem;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,rgba(255, 116, 21) 0 -3px 0 inset;
  box-sizing: border-box;
  color: WHITE;
  cursor: pointer;
  display: inline-flex;
  width: 11.875rem;
  height: 3.75rem;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
}

@media (max-width: 890px) {
  .home-main-buttons {
    width:10.5rem;
    height:3rem;
  }
}

@media (max-width: 700px) {
  .home-main-buttons {
    margin-inline:1rem;
    width:10.5rem;
    height:3rem;
  }
}


.home-main-buttons:focus {
  box-shadow: rgba(255, 116, 21) 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(255, 116, 21) 0 -3px 0 inset;
}

.home-main-buttons:hover {
  box-shadow: rgba(31, 28, 37, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(255, 116, 21) 0 -3px 0 inset;
  transform: translateY(-2px);
}

.home-main-buttons:active {
  box-shadow: rgba(255, 116, 21) 0 3px 7px inset;
  transform: translateY(2px);
}

.footer {
position: absolute;
overflow: hidden;
width: 100%;
top: 140%;
height: 22%;
background-color: black;
color: bisque;
font-size: 20px;
}

.footer-logo {
  position: relative;
  width:12.5rem;
  height:12.5rem;
  float:left;
  overflow: hidden;
  bottom: 25%;
}

.footer-info {
  position:relative;
  float:left;
  top:20%;
}

i’ve tried changing some displays to relative, using % to make all the units responsive, but nothing seems to solve the problem

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After applying margin-left: 0; margin-right: 0 to .sub-menu. To override the margin: 0 20vh styling applied to them introduced by the .nav ul rule. and also removing the transform: translateX(-138px) declaration from the .nav .has-submenu .sub-menu rule. i could get my desired result


  2. 0

    Remove the transform: translateX(-138px) declaration from the .nav .has-submenu .sub-menu rule. As you have discovered, it will achieve the desired effect for varying viewport widths.

    Apply margin-left: 0; margin-right: 0 to .sub-menu. This overrides the margin: 0 20vh styling applied to them introduced by the .nav ul rule. This is the main cause of the sub menus being misaligned.

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  margin: 0 auto;
  padding: 0;
}

a {
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

nav {
  position: sticky;
  top: 0;
  width: 100%;
  height: 9vh;
  min-height: 3.5rem;
  z-index: 100;
  text-transform: capitalize;
  background-color: black;
}

.nav-logo {
  position: absolute;
  float: left;
  transform: translateY(-32%);
  width: 9.375rem;
  height: 9.375rem;
}

nav ul {
  list-style: none;
  margin: 0 20vh;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  position: relative;
}

nav li {
  flex: 1;
  position: relative;
}

nav a {
  display: flex;
  float: top;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
  height: 9vh;
  width: 100%;
}

nav a:hover {
  background-color: #FF7415;
}

nav .has-submenu {
  position: relative;
}

nav .has-submenu .sub-menu {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  background-color: black;
  white-space: nowrap;
}

nav .has-submenu:hover .sub-menu {
  display: block;
}

nav .has-submenu:hover .sub-menu a {
  background-color: black;
  transition: background-color 0.3s ease;
}

nav .has-submenu .sub-menu a:hover {
  background-color: #FF7415;
}

nav ul li {
  position: relative;
}

nav ul li:hover .sub-menu {
  display: block;
}

nav .has-submenu:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%) rotate(-45deg);
  border: solid white;
  border-width: 0 0.0625rem 0.0625rem 0;
  display: inline-block;
  padding: 0.1875rem;
  pointer-events: none;
  transition: transform 0.3s ease;
}

nav .has-submenu:hover:after {
  transform: translateY(-50%) rotate(45deg);
}

.fb-tt-buttons {
  position: inherit;
  display: grid;
  margin: 0;
  padding: 0;
  bottom: 94.5%;
  right: 2%;
  float: right;
}

.tt-button {
  position: inherit;
  transform: translateX(8%);
}

.banner-img {
  position: relative;
}

.homepage-button-container {
  display: flex;
  position: relative;
  transform: translateY(-500%);
  left: 3%;
  z-index: 10;
}

@media (max-width: 1150px) {
  .homepage-button-container {
    top: 100px;
  }
}

@media (max-width: 990px) {
  .homepage-button-container {
    top: 100px;
    transform: translateY(-500%) translateX(-5%);
  }
}

@media (max-width: 890px) {
  .homepage-button-container {
    top: 100px;
    transform: translateY(-500%) translateX(-7%);
  }
}

.home-main-buttons {
  align-items: center;
  margin-inline: 2rem;
  appearance: none;
  background-color: #FF7415;
  border-radius: 0.5rem;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(255, 116, 21) 0 -3px 0 inset;
  box-sizing: border-box;
  color: WHITE;
  cursor: pointer;
  display: inline-flex;
  width: 11.875rem;
  height: 3.75rem;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 18px;
}

@media (max-width: 890px) {
  .home-main-buttons {
    width: 10.5rem;
    height: 3rem;
  }
}

@media (max-width: 700px) {
  .home-main-buttons {
    margin-inline: 1rem;
    width: 10.5rem;
    height: 3rem;
  }
}

.home-main-buttons:focus {
  box-shadow: rgba(255, 116, 21) 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(255, 116, 21) 0 -3px 0 inset;
}

.home-main-buttons:hover {
  box-shadow: rgba(31, 28, 37, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(255, 116, 21) 0 -3px 0 inset;
  transform: translateY(-2px);
}

.home-main-buttons:active {
  box-shadow: rgba(255, 116, 21) 0 3px 7px inset;
  transform: translateY(2px);
}

.footer {
  position: absolute;
  overflow: hidden;
  width: 100%;
  top: 140%;
  height: 22%;
  background-color: black;
  color: bisque;
  font-size: 20px;
}

.footer-logo {
  position: relative;
  width: 12.5rem;
  height: 12.5rem;
  float: left;
  overflow: hidden;
  bottom: 25%;
}

.footer-info {
  position: relative;
  float: left;
  top: 20%;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Yazigi Tech</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-Navigation Bar->
  <nav>
    <img src="https://picsum.photos/150/150" class="nav-logo">
    <ul>
      <li><a href="#">Página inicial</a></li>
      <li class="has-submenu">
        <a href="#">Sobre</a>
        <ul class="sub-menu">
          <li><a href="#">Sobre mim</a></li>
          <li><a href="#">Sobre nós</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Serviços</a>
        <ul class="sub-menu">
          <li><a href="#">Criação de websites</a></li>
          <li><a href="#">Montagem e limpeza de PC</a></li>
        </ul>
      </li>
      <li><a href="#">Contato</a></li>
    </ul>
    <div class="fb-tt-buttons">
      <div class="fb-like" data-href="" data-width="50" data-layout="button" data-action="like" data-size="small" data-share=""></div>
      <div class="tt-button">
        <a href="https://twitter.com/jorge?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-lang="pt" data-dnt="true" data-show-count="false"></a>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
    </div>
  </nav>

  <!-1024x768 Banner->
  <img src="https://picsum.photos/1024/768" alt="Meu banner" class="banner-img">
  <div class="homepage-button-container">
    <button type="button" class="home-main-buttons" role="button">Ver meu trabalho</button>
    <button type="button" class="home-main-buttons">Começar um projeto</button>
  </div>
  <div class="footer">
    <img src="img/logo-3.png" alt="Minha logo" class="footer-logo">
    <div class="footer-info">
      Yazigi Tech software e manutenção de computadores<br> Editor da página: Victor Yazigi<br> Designer da página: Sabrina Leonel</div>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search