0

I'm trying to make a navigation bar at the top of my website:

On a desktop screen, it should look like this:

+--------+------------------------------+
|        | WEBSITE NAME                 |
|  LOGO  +------------------------------+
|        |     LINK_1 LINK_2 LINK_3 ... |
+--------+------------------------------+

On narrower mobile screens, I hide the navigation links using CSS media queries.

The result looks like this:

+------+--------------+
|      | WEBSITE NAME |
| LOGO +--------------+
|      |              |
+------+--------------+

However, I want the website name to fill in the grid cell that the hidden navigation links used:

+------+--------------+
|      |              |
| LOGO | WEBSITE NAME |
|      |              |
+------+--------------+

How can I do this?

This is a MWE of my code:

#header {
    display: grid;
    grid-template-columns: 75px auto;
    grid-template-rows: auto auto;
    align-items: center;
}
#header-logo {
    grid-column: 1 / span row: 1 / span 2;
}
#header-sitename {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}
#header-nav {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    justify-content: right;
}
@media (max-width: 600px) {
    #header-nav {
        display: none;
    }
}
<header id="header">
    <div id="header-logo">
        <a href="/">
            <img src="/img/logo.png">
        </a>
    </div>
    <div id="header-sitename">
        <a href="/">WEBSITE NAME</a>
    </div>
    <ul id="header-nav">
        <li>
            <a>LINK_1<a>
        </li>
        <li>
            <a>LINK_2>a>
        </li>
        <li>
            <a>LINK_3><a>
        </li>
        <!--- More links -->
    </ul>
</header>
ban_javascript
  • 339
  • 1
  • 4
  • 16

1 Answers1

0

i see that your HTML is not well indented , some closing tag for img for example, you can specify for your media query the behavior of the header-sitename

@media (max-width: 600px) {
  #header-nav {
      display: none;
  }
  #header-sitename {
    margin: 2rem;
  }
}

i've added a margin of 2 rem to be in the middle of the page when size is less than 600px so your website name fill the middle you can check more about media queries in: https://learnjsx.com/category/1/posts/mediaQueries

Ali
  • 118
  • 1
  • 3
  • [`img` tags do not need to be closed.](https://stackoverflow.com/questions/14860492); I've left out the `src` attribute since it wasn't relevant to my question. Thanks for your answer, but it only adds a margin around the sitename, while there still remains an empty grid cell where the hidden nav links are. I'm looking for something that lets the sitename cell expand to fill the empty nav link cell, as shown in my question. – ban_javascript Oct 24 '21 at 20:03