3 Replies - 1046 Views - Last Post: 14 January 2013 - 12:23 AM

#1 bearkrust  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-January 13

How do I do a sticky navigation menu in a responsive theme?

Posted 10 January 2013 - 08:59 PM

Hi. I'm not a expert on coding. While I have some understanding of why certain codes work, I'm more of a find-code-plug-in-play-and-hope-and-pray-it-works (PIPAPIW) kind of "coder." This task has become quite a thorn in my side (over a month it's been stuck in my side) and I just can't figure out what will work. I am new to sticky/fixed/whatever navigation menus and responsive themes, but I thought I could do like I always do, find-code-plug-in-play-and-hope-and-pray-it-works and have favorably results. Not this. I have tried many things and I don't even remember what all those snippet of codes I've used and tried implementing. So I've given in to ask for help from those who know this stuff. Anyway, here's some detail of what I've recently done to know real avail:

The WP responsive theme I'm working on:

http://www.wpexplorer.me/tetris/

I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will immediately see -- without having to upload the theme on your WP account -- that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.

I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.

Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).

Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?

I really would like my menu bar to function like this site's sticky navigation menu:

http://teothemes.com/wp/scrn/

Notice how as you scroll down everything above the menu goes out of site, but when the menu bar gets to the top of the page, it stops and becomes a sticky/fixed menu bar and the rest of the content on the page goes behind it and out of site as you continue scrolling down. How do I get this Tetris theme to do this and also without going haywire when the responsive feature kicks in?

Thanks for any help you can offer.

Looks like my frustration is getting the best of me, please excuse my poor grammar *shaking my head*.

Is This A Good Question/Topic? 0
  • +

Replies To: How do I do a sticky navigation menu in a responsive theme?

#2 j4v3d  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 52
  • Joined: 24-November 12

Re: How do I do a sticky navigation menu in a responsive theme?

Posted 11 January 2013 - 04:41 PM

Quote

Hi. I'm not a expert on coding. While I have some understanding of why certain codes work, I'm more of a find-code-plug-in-play-and-hope-and-pray-it-works (PIPAPIW) kind of "coder." This task has become quite a thorn in my side (over a month it's been stuck in my side) and I just can't figure out what will work. I am new to sticky/fixed/whatever navigation menus and responsive themes, but I thought I could do like I always do, find-code-plug-in-play-and-hope-and-pray-it-works and have favorably results. Not this. I have tried many things and I don't even remember what all those snippet of codes I've used and tried implementing. So I've given in to ask for help from those who know this stuff. Anyway, here's some detail of what I've recently done to know real avail:


Not really a good start is it. You need to be able to understand what is going on and how the responsive themed websites work. As for the sticky navigation i believe the CSS will be position:fixed and positioned at the top. You need to be careful where you are specifying pixels because if you want it look smaller on small screen sizes or tablets then you will need to specify the width in % and not pixels.

This post has been edited by j4v3d: 11 January 2013 - 04:42 PM

Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2890
  • View blog
  • Posts: 9,597
  • Joined: 12-December 12

Re: How do I do a sticky navigation menu in a responsive theme?

Posted 11 January 2013 - 05:27 PM

I believe the sticky header is achieved with the help of a jquery-flexslider plug-in. But you'll need to study the theme, its options, and jquery/flexslider in order to incoporate it. Perhaps the owner of the theme can offer you some guidance.
Was This Post Helpful? 0
  • +
  • -

#4 bearkrust  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-January 13

Re: How do I do a sticky navigation menu in a responsive theme?

Posted 14 January 2013 - 12:23 AM

I figured it out. I kept finding different snippet of codes online and tweaking here and there and prayed it would work. And, finally something did (yeah, I can't explain it). But YAY it's working!!!! If I just took the time to learn this stuff, I'd save me a whole lot of headaches and frustrations -- oh and time. smh. Thanks though, j4v3d and andrewsw.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1