How do I make an element with position fixed stop "cropping" its content when resized?

Navigation
1

Someone knows how I can make an element with position: fixed; responsive. That is, the left content remains left and the content of the right, when resized, remains on the right without being off-canvas ?

This is an outline 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 got the desired effect by changing the position: fixed; to position: absolute; , only the header is not fixed at the top of the screen.

CODEPEN with editable code.

    
asked by anonymous 08.01.2016 / 07:44

3 answers

0
  

"... so I can not have a responsive menu, the idea is that the horizontal scrollbar exists, but as shown in the image the header content does not follow 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 menu contents, now switch from fixed to absolute and do the same thing, content appears more the header does not always stay on the top.Any solution? - Luan da Costa Silva "

@LuandaCostaSilva The CSS language does not allow you to make a partially fixed element. You definitely need something like the javascript language to scroll the element just horizontally and fixed in Vertical scrolling, but even that way, you will not get smooth scrolling. Please take a look at this example I wrote to you:

Clicking here jsfiddle.net/RodrigoCarioca/

A brief explanation:

Since CSS does not allow an element to be set to fixed , follow X-axis scrolling, so I set it to absolute . In Java Script I created two functions concatenated the browser property, window : one to return the scroll value at the top of the page, and another to add that value to position of 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 it's up to you to create the sum function either for left or right ).

    
11.01.2016 / 20:23
2

What you're missing is the structure of the tag (s) you're using, and you also lack the overflow-x:auto tag to be declared in your content. I took your example and corrected it, see how > > here , .

    
11.01.2016 / 15:59
0

Let's specify what is a position: fixed; :

  

O position: fixed; will set the position of the element in the coordinate that you set. As the page is rolled, the element remains fixed at the position you set and the page content scrolls normally.

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

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

    
11.01.2016 / 12:48
Display user messages Providers with support for Laravel 5 [closed]