Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

Fixed div is not responsive

I would like to achieve the same effect which can be seen on this forum. When you will look at the top there is fixed menu with "Community" text and notification on the right side.

On my website I have a search input instead of "Community" and notification image on the right side just like here

<div id="user-top-menu">
   <form class="search-form" action="#">
   <input type="text" name="user-search" placeholder="Search on this page...">
   </form>
   <img class="notifi clearit" src="template/img/bulb.png" alt="Bulb image">
</div>

This is style for the fixed div

#user-top-menu {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1150px;
    height: 4.125em;
    padding-top: 1em;
    padding-left: 2em;
    background-color: #fff;
    border-bottom: 1px solid #dcdcdc;
}

This is for form and image

.search-form,
.search-form input {
    display: inline;
    width: 60%;
    float: left;
}

.notifi {
    height: 50px;
    width: 50px;
    float: right;
}

As you can see, form is floated left and image is floated right. However, it looks good on desktop with max-width resolution but when I make smaller browser window everything is responsive except fixed div.

When I take max-width in a div it looks like there is infinite with of a div because i can see image.

Image is like on the same place all the time so when window is smaller it just disappears. I have no idea why it happens like this.

And yes I have a meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">
Sandro Das Neves
.a{fill-rule:evenodd;}techdegree seal-36
Sandro Das Neves
Front End Web Development Techdegree Graduate 23,426 Points

Have you tried with display: flex; ?

I think it don redu ce it width because the input near the image mais it have a minimum width.

Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

Sandro what do you mean display: flex? I don't want to work with flex because of it compatibility and I'm not sure if I can achieve this fixed effect with display:flex.

min-width will not solve the problem

3 Answers

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Hi Tobiasz,

Give this a shot.

http://codepen.io/anon/pen/YqLPPw

I took your code and adjusted it.

Mark

Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

Thanks, I realized that my code is working fine when we start on the top-left but my div is not starting on top left because I have second fixed div on the side. Please copy this code to codepen and you will understand what I'm trying to say :)

<div id="user-side-menu">
            <a href="user.html">
        <img class="logo-img" src="img.svg" alt="SVG file"></a>
            <ul class="side-nav">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div>

<div class="wrapper">

  <div id="user-top-menu">
     <form class="search-form" action="#">
     <input type="text" name="user-search" placeholder="Search on this page...">
     </form>
     <img class="notifi clearit" src="template/img/bulb.png" alt="Bulb image">
  </div>

</div>

* {
  box-sizing: border-box;
}

.wrapper {
    padding-top: 5.1875em;
    padding-left: 18em;
    max-width: 1200px;
}

#user-side-menu {
    position: fixed;
    top: 0;
    width: 18em;
    height: 100vh;
    background-color: #282828;
}

#user-top-menu {
    position: fixed;
    top: 0;
        width: 100%;
        max-width: 1150px;
    height: 4.125em;
    padding-top: 1em;
    padding-left: 2em;
    background-color: #fff;
    border-bottom: 1px solid #dcdcdc;
}
.search-form,
.search-form input {
    display: inline;
    width: 60%;
    float: left;
}

.notifi {
    height: 50px;
    width: 50px;
    float: right;
}

Btw. Do you think using box-sizing is a good practice? I'm against using universal selectors and I don't mind typing weird numbers in my layout because most are em units with my base size.

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Regarding Box-sizing as a universal selector its my goto. Overall it makes doing layouts easier at least to me. if I say 50% its 50% with or without padding. I don't have to worry about changing things around if I want a little space added later.

Do you have this live somewhere I can play with it a bit easier? At some point your going to have to remove the sidebar menu for smaller/mobile devices.

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

Well will consider using border-box :)

http://codepen.io/tgala91/pen/jqxzRG