Fixed navigation bar extends too far on large monitors

user_16936328 0
Viewed 126

I've created a website with a fixed horizontal navigation bar that is to the right of the screen, with the logo on the left. Everything with it works fine until the monitor extends over 1240px wide. At that point the navbar extends too far to the right in comparison to the rest of the content (that has a max-width of 1024px).

Now, I know exactly why it does this, I've coded it to do that by using right: 0, however I still don't want it to extend past the 1024px that I've set the rest of the content to and I have no idea how to resolve the issue. I've tried setting a max-width of the div-element and it does nothing, I've tried creating other elements with max-width: 1024px and position: relative (as I was suggested this option), but with no luck.

The only long way around the issue I can find is to have a media query for each resolution and using margins instead of right: 0 although this seems like an unnecessarily long and complicated solution. I'm also not a developer by any means, this is my first time coding ever, so my knowledge is very limited.

main,
header {
    max-width: 1024px;
    margin: auto;
}

@media screen and (min-width: 780px) {
    .navbar {
        background-color: #ffffffde;
        position: fixed;
        padding: 3px;
        max-width: 1024px;
        z-index: 50;
        right: 0;
        margin-right: 2rem;
    }
    .navbar a {
        float: left;
        display: block;
        color: #000000;
        text-align: center;
        padding: 8px;
        text-decoration: none;
        font-size: 17px;
        top: 15px;
    }
    .navbar .icon {
        display: none;
    }
}

.dropdown {
    float: left;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: black;
    padding: 8px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9d3;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: rgba(224, 222, 222, 0.705);
}

.dropdown-content a:hover {
    background-color: rgba(224, 222, 222, 0.705);
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}
<header>
   <a href="/en/index.html">
      <div class="logo">Logo</div>
   </a>

   <div class="navbar" id="myNavbar">

      <a href="#about">About</a>

      <div class="dropdown">
         <button class="dropbtn">Services 
            <i class="fa fa-caret-down"></i>
         </button>
         <div class="dropdown-content">
            <a href="#services and solutions">Services and Solutions</a>
            <a href="#training">Training and Workshops</a>
         </div>
      </div>

      <a href="#partners">Partners</a>
      <a href="#contact">Contact</a>

      <a href="/sv/index.html" style="color: rgb(138, 138, 138)">Svenska</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
      </a>

   </div>
</header>

(I've excluded the CSS for tablet and mobile since those work, as well as the JS since that isn't relevant for the issue and didn't want it to take up unnecessary space in the post)

If anyone has any possible solutions to my issue I'm down to try most things since I've already searched high and low for an answer to my question.

navigationbar media-queries css html
3 Answers

Fixed position elements are removed from the normal DOM flow. Therefore fixed position elements are always relative to the viewport and ignore everything else on the page.

However, since you know the <main> content width is 1024px, you can use calc() to adjust the right position of the fixed navbar...

The width of the whitespace to the left/right of the main content is: 100% (the page width) minus 1024px (the main content width) split in half (left & right sides). Therefore, this will give you the right edge of the main content.

right: calc((100% - 1024px)/2);

   .navbar {
        background-color: #ffffff;
        position: fixed;
        padding: 3px;
        max-width: 1024px;
        z-index: 50;
        right: calc((100% - 1024px)/2);
        margin-right: 2rem;
   }

Codeply

user_1714560

Always try to use :

* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

So that most of the issues of spanning area more than defined or overflowing the container can be removed .
See this for box-sizing
Here padding/margin = 0 remove default values of element which sometimes are reason of problem too .
Now still it is rendering outside than give the values according to screen size and try to remove some extra margin

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

main,
header {
  max-width: 1024px;
  margin: auto;
}

@media screen and (min-width: 780px) {
  .navbar {
    background-color: #ffffffde;
    position: fixed;
    padding: 3px;
    max-width: 1024px;
    z-index: 50;
    right: 0;
    margin-right: 2rem;
  }
  .navbar a {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-size: 17px;
    top: 15px;
  }
  .navbar .icon {
    display: none;
  }
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: black;
  padding: 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9d3;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: rgba(224, 222, 222, 0.705);
}

.dropdown-content a:hover {
  background-color: rgba(224, 222, 222, 0.705);
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<header>
  <a href="/en/index.html">
    <div class="logo">Logo</div>
  </a>

  <div class="navbar" id="myNavbar">

    <a href="#about">About</a>

    <div class="dropdown">
      <button class="dropbtn">Services 
            <i class="fa fa-caret-down"></i>
         </button>
      <div class="dropdown-content">
        <a href="#services and solutions">Services and Solutions</a>
        <a href="#training">Training and Workshops</a>
      </div>
    </div>

    <a href="#partners">Partners</a>
    <a href="#contact">Contact</a>

    <a href="/sv/index.html" style="color: rgb(138, 138, 138)">Svenska</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>

  </div>
</header>

user_168463460

One thing you could do is place the elements with coordinates on an absolute level: Of course you will put the values ​​based on the position

 position: absolute;
 top: 0;
 left: 20px

 div.absolute {
 position: absolute;
 top: 80px;
 right: 0;
 width: 200px;
 height: 100px;
 border: 3px solid #73AD21;
 }

user_169360890
Related