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

Html – Add hamburger icon and make responsive a custom navbar made with div blocks

I am trying to make the following custom navbar responsive. I created it using only div blocks because it was easier for me to understand, and the code is shorter, simpler, and pure CSS. Here’s a link to the Codepen: https://codepen.io/familias/pen/WNYraNy.

Here is the CSS:

.table-cell {
  display: table-cell;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

.superior {
  position: relative;
  display: inline-block;
}

.superior a {
  position: relative;
  display: inline-block;
  margin: none;
  padding: none;
  border: none;
  outline: none;
  font-size: 16px;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 8px 20px 8px 20px;
}

.superior a:hover {
  text-decoration: none;
  color: #e5633f;
  font-weight: 400;
}

.inferior {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 0px solid #000;
}

.inferior a {
  margin: none;
  padding: none;
  border: none;
  outline: none;
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-right: 30px;
  padding-left: 30px;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-bottom: 1px solid #000;
}

.inferior a:hover {
  font-weight: 400;
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

.superior:hover .inferior {
  display: block;
}
<div id="table">
  <div id="table-row">
    <div class="table-cell">
      <div class="superior"><a href="#">News</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Politics</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior">
        <a href="#">Economy</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>

      <div class="superior"><a href="#">Culture</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Health</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Education</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Live</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
    </div>
  </div>
</div>

What I need is for the menu to display vertically when viewed on a mobile phone. How can I achieve this?

Tags:

2

Answers


  1. 0 
    @media only screen and (max-width: 600px) 
{
 .superior {
   position:relative;
   display:block;
   }
}

    You can try this, " @media only screen and (max-width: 600px)" means include a block of CSS properties only if a certain condition is true in this case if screen is smaller than 600px. It will create vertically menu and you can add style as you need.

    Login or Signup to reply.
  2. 0

    Here is an option using some grid style with a checkbox label for the hamburger menu: Super ugly but just to show what is where. Note the hover on the menu show the associated .inferior but that could be fancier; more just functional here than super pretty just to show how it can be done.

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
  font-size: 16px;
}

.wrapper {
  display: grid;
  grid-template-areas: "header header header" "main main main" "main main main" "footer footer footer";
  grid-template-rows: 1fr 10em 5em 2em;
  grid-template-columns: 1fr auto 1fr;
  background-color: #44dd4044;
  grid-gap: 0.25em;
}

.wrapper>* {
  /* just to show the contained elements */
  border: 1px solid orange;
}

.header {
  grid-area: header;
  display: grid;
  /* notice the 1em and 2em column for the entire header left and right "padding" */
  grid-template-columns: 1em 1fr 1fr auto 2em;
  grid-template-areas: ". logo check hamburger";
  grid-template-rows: 3.5em;
  align-items: center;
  background-color: #FFFFFF;
}

.header .logo {
  grid-area: logo;
  font-size: 1.5em;
  text-decoration: none;
}

.header .menu-btn {
  grid-area: check;
  /* hide or not this is the check that activates the menu via click on hamburger and css */
  display: none;
}

.header .menu-icon {
  grid-area: hamburger;
}

.container-menu {
  /* put the menu where you want and add style */
  background-color: #ffff00;
  grid-column: 2 / 4;
  grid-row: 2 / 5;
  display: none;
  z-index: 3;
}

.wrapper>main {
  grid-area: main;
  background-color: #d4ebf2;
}

.wrapper>footer {
  grid-column: 1/5;
  background-color: #ddd;
  text-align: center;
  align-self: center;
}

.container-menu .superior {
  background-color: #00FFFF20;
  color: #808000;
  text-align: center;
  line-height: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container-menu .superior .main-link {
  text-decoration: none;
  color: #00BFFF;
  font-weight: 600;
}

.container-menu .superior .main-link:hover {
  background-color: #FF0000;
  color: #FFFF00;
}

.inferior {
  grid-column: 2;
  display: none;
}

.container-menu .superior:hover .inferior {
  display: flex;
  flex-direction: column;
}

.above {
  font-size: 1em;
  padding: 0.25em;
  text-align: center;
}

a {
  color: #000000;
}

.superior {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr auto;
}

.header .menu-icon .navicon {
  /* style and color the svg hamburger as needed */
  border: solid 1px #00000040;
  border-radius: 0.25em;
  padding: 0.25em;
  height: 2em;
  width: 2em;
  color: #0000AA40;
  cursor: pointer;
  user-select: none;
}

.wrapper>.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.wrapper:has( .header input#menu-btn:checked)>.container-menu.menu {
  display: grid;
  grid-template-columns: 10em auto;
  border: solid 1px lime;
}

input#menu-btn:has(+ label.menu-icon) {
  color: red;
}
    <div class="above">I am above</div>
<div class="wrapper">
  <div class="header">
    <a href="#" class="logo">Oh Happy Day Nav</a>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn">
      <svg class="navicon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
      </label>
  </div>

  <div class="container-menu menu">
    <div class="superior"><a class="main-link" href="#">News</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Politics</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Economy</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Culture</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Health</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Education</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Live</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
  </div>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search