Search code examples
javascripthtmljquerycssmobile-website

How can I make my header mobile responsive?

Can you please help me with making my existing header responsive? I've tried a lot, but nothing worked... Here is the HTML Code:

<header>
        <div class="logo-container">
            <img src="./img/logo.svg" alt="logo" />
            <h4 class="logo">CVaS</h4>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a class="nav-link" href="one.html">1. Link</a></li>
                <li><a class="nav-link" href="two.html">2. Link</a></li>
                <li><a class="nav-link" href="three.html">3. Link</a></li>
            </ul>
        </nav>
    </header>

And here is the CSS Code:

    body {
    font-family: 'Poppins', sans-serif;
}
header {
    display: flex;
    width: 90%;
    height: 10vh;
    margin: auto;
    align-items: center;
}

.logo-container,
.nav-links {
    display: flex;
}

.logo-container {
    flex: 1;
}
.logo {
    font-weight: 400;
    margin: 5px;
}
nav {
    flex: 2;
}
.nav-links {
    justify-content: space-around;
    list-style: none;
}
.nav-link {
    color: #5f5f79;
    font-size: 112%;
    text-decoration: none;
}

I hope you can help me :) It would be great if the visitors could open the header through a burger icon...

Solution

  • Here you can simply use bootstrap to make it responsive. Following is the code for adding the bootstrap.

    You simply need to add the link and scripts in your head.

    <head>

<title>Document</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

</head>

    Code for Responsive Header:

    <div class="logo-container row">
    <img src="./img/logo.svg" class="col-6" alt="logo" />
    <h4 class="logo col-6">CVaS</h4>
</div>

    And now the code for Responsive Navbar:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item active">
      <a class="nav-link" href="#">Link-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link-3</a>
    </li>
  </ul>
 </div>
</nav>

    Note: You won't need to add css style after this most likely.

    If you don't want to use bootstrap then you can simply use media queries in css for different widths. You can make it responsive using position property in css along with media query.