0

I've never really been good with front end designing here and I am stuck with something here. What I'm trying to achieve is make the header of website fixed only on mobile Say

<div class='row' id='header' >&nbsp;</div>

I can use bootstrap and Foundation since I am familiar with the basics of it but I can't get my head around doing what I want. I want the header div to be fixed only for mobile devices so that when you're visiting from large screens/computer it's not fixed and goes with the flow with scrolling but only with mobile devices it remains fixed at top. Now I can simply change the css property with Jquery but I dont know how to find out and check for the device if it's big or small screen something like

if(deviceScreen==big){//keep it relative/absoolute} else //make it fixed 

If it can be done with css only I would more than love to do it.

Another problem that I'm facing here is with the fixed elements(specifically a sidebar that only appears for small devices /main nav becomes sidebar) I want it to be fixed at the left but be scrollable in its own since some options are not visible because they dont fit in screen. I really need help here, the site wasn't developed by me. I am hired to make some backend changes and require to fix some front end bugs too that are mentioned here

1
  • you can use css media queries if you are happy to go down the route of using screen width to determine a mobile device
    – atmd
    Jul 3, 2015 at 12:33

4 Answers 4

0

Use CSS Media Queries to determine the screen size.

If lets say the screen is no wider than 600 px:

@media (max-width: 600px) {
     #header {
           position:fixed;
           top:0;
     }
}

This css rule for header will only be applied when the screen is no wider than 600. And then set it fixed to top.

You can add multiple meda queries to a single dom element, adjusting it to your needs when the user changes browser width.

More about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

2
  • Thank you (Thanks to everybody else too for the answers) But is there a way to apply javascript/jquery based on screensize? Because I have classes defined already in css and what I want to do is when the user is on a small screen classx is added to the element and when hes on a wide screen classy is added Jul 3, 2015 at 17:44
  • Yes you can. Here's an example: if ($(window).width() > 760) { $('#example-div').addClass('fixed'); } Jul 3, 2015 at 17:55
0

you can simply do this by using css(Media Queries)

here is the demo: http://jsfiddle.net/3cndjsx1/

 @media (max-width: 600px) {
    header{
        position:fixed; 
        z-index:2;   
    }

    footer {   
        position:fixed; 
        z-index:2;
    }

 }

Header (you can change selectors according to your code) and footer(you can change selectors according to your code) will be fixed for screen size less the 600px(you may also change the screen size in css Media Queries)

0

In case a media query will be good enough to approximate the target's device, I suggest you use orientation, like this...

@media (orientation:portrait) {
#header {
position:fixed; 
top:0;}
}

...as you probably don't want the fixed menu to show up on mobiles held horizontally either.

0

The best approach is media queries.

You should also use 640px:

@media (max-width: 640px) {
     #header {
           position:fixed;
           top:0;
     }
}

Here a link where you can see the media queries for standard devices.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.