How to make an element with position Fixed stop "cutting" its contents when resizing?

Question

Does anyone know how I can make an element with position: fixed; be responsive. That is, the contents on the left remain on the left and the contents on the right, when resized, remain on the right off-canvas?

That’s a sketch of what I’m trying to do:

HTML

<header>
  <div class="content">
    <img src="http://seeklogo.com/images/L/Light_Logomarca-logo-0C4DF9D65C-seeklogo.com.gif" alt="logo" />
    <ul class="menu">
       <li>menu-item</li>
       <li>menu-item</li>
       <li>menu-item</li>
    </ul>
  </div>
</header>
<main>
  <div class="content">
  <h1>Conteúdo</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
  </div>
</main>

CSS

header {
   position: fixed;
   top: 0;
   width: 100%;  
   min-width: 700px;
   border: 1px solid black;
   background-color: #ccc;
}
.logo {
   display: inline-block;
}
img {
   float: left;
   width: 70px;
   height: 70px;
   max-width: 100%; 
}
.menu {
   float: right;
}
.menu li {
   display: inline-block;
   border: 1px solid black;
   padding: 5px;
}
.content {
   width: 700px;
   margin: 0 auto;
}
main {
   margin-top: 150px;
}

I achieved the desired effect by changing the position: fixed; for position: absolute;, only that header does not get fixed at the top of the screen.

CODEPEN with the editable code.

Answer 1

What you are missing is the structure of the tags you are using and also the tag is missing overflow-x:auto to be stated in your content. I took your example and corrected it, see how it turned out >>here<<.

Answer 2

"... so I can’t have a responsive menu, the idea is that the horizontal scrollbar exists, but as shown in the image the header content does not accompany this bar, to better understand see: jsfiddle.net/Luancostasilva/xqkytsbn, now resize the page until you create a horizontal bar, now slide the horizontal bar to the end, see? you do not see the contents of the menu, now switch from Fixed to Absolute and do the same thing, the content appears but the header does not always stay at the top. Any solution? - Luan da Costa Silva"

@Luandacostasilva CSS language does not allow you to make a partially fixed element. You definitely need something like the javascript language to scroll the element only horizontally and fixed on the Vertical scroll, but even that way, you won’t get smooth scrolling. Please take a look at this example I wrote for you:

Click here jsfiddle.net/Rodrigocarioca/

A brief explanation:

How CSS does not allow an element to be defined as fixed track the X-axis scrolling, I set it as absolute. In Java Script I created two functions concatenated to the browser property, the window: one to return the scrolling value from the top of the page, and another to add this value to the position tag header.

I also left part of the code in case you want the same process for an element that needs to follow the Y-axis scrolling (but then it’s up to you to create the summation function be for left or right).

Answer 3

Let’s go over the specs of what a position: fixed;:

The position: Fixed; will fix the position of the element in the coordinate you set. As the page is scrolled, the element remains fixed at the position you set and the page content normally scrolls.

Well, by the specification to understand that it fixed on the page and follows the overflow if active.

The estate position: fixed; ends next to the width or height of the page, that is, if your page is smaller than the width of your div, part of it will no longer exist together with the page, since with this property they become a single object.