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

<img> and <nav> in #globalnav not pushing themselves to max width – Html

I have a fixed header with a global navigation bar. The issue is that the logo and navigation menu in the globalnav are not pushing themselves to the max width of the container. The HTML code for the header is as follows:

<header id="globalnav-container">
    <div id="globalnav-wrapper">
        <div id="globalnav">
            <a href="/" aria-label="Home"><img id="globalnav-logo" src="/images/LogoBlack.png" alt="Logo Black"></a>
            <nav id="globalnav-menu" aria-label="Site navigation">
                <ul id="globalnav-menu-list">
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-web" title="Web Services Dropdown"><a href="#">Web</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-mobile" title="Mobile Services Dropdown"><a href="#">Mobile</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-desktop" title="Desktop Services Dropdown"><a href="#">Desktop</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

And the CSS code is as follows:

#globalnav-container {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  height: 45px;
  transition: background 0.2s linear, height 0.2s linear;
}

#globalnav-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#globalnav {
  display: flex;
  align-items: center;
}

#globalnav-logo {
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;
}

#globalnav-menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.globalnav-menu-list-item {
  padding: 0 10px;
}

#globalnav-menu {
  margin: 0;
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
  #globalnav-container {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

I have set the max-width of the globalnav-wrapper to 980px and centered it using margin: 0 auto. But the logo and navigation menu are not expanding to the full width of the container. How can I make them expand to the full width of the globalnav-wrapper?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to mr. Hirtik for fixing my problem but for anyone who wants to know how to stop the #globalnav from touching the top and center it in the #globalnav-container with the current CSS, you can add the following styles to the #globalnav selector:

    #globalnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    height: 100%;
}

    This will make the #globalnav take up the full width of the #globalnav-container, with a maximum width of 980px, and center it horizontally. The height property is set to 100% to match the height of the #globalnav-container.


  2. 0

    You don’t need to usedispay:flex; property to parent <div>'s. Only apply dispay:flex; property to .globalnav. Also if you want to use full width, Please remove max-width:980px.
    Thank you.

    #globalnav-container {
  position: fixed;
  top: 0;
  width: 100%;
  cursor: default;
  height: 45px;
  transition: background 0.2s linear, height 0.2s linear;
}

#globalnav-wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

#globalnav {
  display: flex;
  align-items: center;
  justify-content:space-between;
}

#globalnav-logo {
  height: 16px;
  object-fit: contain;
  display: block;
  margin: 0;
}

#globalnav-menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.globalnav-menu-list-item {
  padding: 0 10px;
}

#globalnav-menu {
  margin: 0;
}

@supports ((-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px))) {
  #globalnav-container {
    backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
    <header id="globalnav-container">
    <div id="globalnav-wrapper">
        <div id="globalnav">
            <a href="/" aria-label="Home"><img id="globalnav-logo" src="/images/LogoBlack.png" alt="Logo Black"></a>
            <nav id="globalnav-menu" aria-label="Site navigation">
                <ul id="globalnav-menu-list">
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-web" title="Web Services Dropdown"><a href="#">Web</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-mobile" title="Mobile Services Dropdown"><a href="#">Mobile</a></li>
                    <li class="globalnav-menu-list-item" id="globalnav-menu-list-item-desktop" title="Desktop Services Dropdown"><a href="#">Desktop</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search