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

Html – How to make header only responsive?

There’s an old website that isn’t optimized for small screens (PHP + HTML/CSS/JS).

The <meta name="viewport"...> tag is missing in the head section, so the page content is displayed by adjusting to the screen size – it turns out to be tiny. The site is far from being fully adapted for mobile devices, but there’s a desire to make at least the header adaptive.

That is, it’s assumed that when opened on a mobile device, the header will look like a rectangle with a logo and a "hamburger" icon that’s commonly used in such cases. Pressing the hamburger icon, we see a modal window with menu items.

My knowledge is not enough.

Did I understand correctly that without the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, media queries and container queries don’t work?

If I specify the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag in the head section, it turns out that now all pages need to be adapted.

If I don’t specify the <meta name="viewport"...>, then the statements in media queries are not applied.

How can I make only the header adaptive for now?

Tags:

2

Answers


  1. 0

    I hope I understood your question correctly.
    You are going to make a menu responsive.
    that when the site is displayed on a mobile phone, the menu should be in the form of a hamburger.
    Exactly you should use media query.

    @media only screen and (max-width: 600px) {
   body {
     background-color: light blue;
   }
}

    Please pay attention to this code.
    max-width is used.
    This means that if your page width is smaller than 600px, the body color will change.
    Another value can be given to him: min-width
    That is, if it is greater than one number, an action will occur.
    I feel that you also understand, it seems to work the same as the conditional rings.

    You can have your own main menu.
    And create your own burger menu too.
    Just display: none.
    And using media-query, say that if the value is smaller than a certain limit, display: block.
    and display your main menu to none.

    It means that you have created both, but you specified a condition for their display.
    And that you can define the max-width number according to the users of your site, which type of device they visit the most.
    You can also from: w3school.com
    get help

    Sorry for the long explanation, I tried to make it clear for you.

    Login or Signup to reply.
  2. 0

    this is a responsive header

    >  --style.css--

    • {box-sizing: border-box;}

      body {
      margin: 0;
      }

      .header {
      over-flow: hidden;
      background-color:
      padding:20px 10px;
      }

      .header a {
      flote: 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 a:hover {
      background-color: #ddd;
      color: black;
      }

      .header a.active {
      background-color: dodgerblue;
      color: white;
      }

      .header-right {
      float: right;
      }

      @media screen and (max-width: 500px;) {
      .header a {
      float: none;
      display: block;
      text-align: left;
      }

      .header-right {
      float: none;
      }
      }

      –HTML code–

      LOGO

      Home
      contact
      About

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search