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

WordPress

Stephen Roberts
Stephen Roberts
8,580 Points
Posted by Stephen Roberts
Stephen Roberts
8,580 Points

Having difficulties with navigation bar, and making site responsive

Hello, I am really struggling at the moment. I have been messing around with my playground site for a friend and adjusted the navigation bar from the themes structure. However the nav bar is no longer responsive and jumps all over the place. I would like to keep it underneath the banner when the screen size adjusts.

Also as another issue there are 3 pages to the site and the navigation also seems to move around on each of the 3 pages.

I would be really grateful if someone could look at the code and tell me where I have gone wrong.

Thanks in advance

http://callardscakes.com/

Stephen Roberts
Stephen Roberts
8,580 Points
Stephen Roberts
Stephen Roberts
8,580 Points

I have also just looked at it in chrome and IE. In firefox the nav sits under the banner, however in chrom and IE the nav bar sits on top of the banner???? this is getting stranger and stranger to me.

Right just to update I have cleared the cache and stopped running any addons. I am including some screen shots because it seems people can't see the problem.

So this is the nav fullsized it sits inside the banner which I don't want http://snag.gy/HQH5D.jpg This is the nav on another page fullsized the nav is under the banner which is what I am after http://snag.gy/5N2JM.jpg This is now the nav when the screen is half size moved quite away from the banner http://snag.gy/sk9l9.jpg This is then the nav when the screen is at its smallest and it is way into the text. It is worse on my main page though. http://snag.gy/hVOkq.jpg Hope this helps

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Stephen,

I'm sorry to say that I don't see the problem you're having, between Chrome, IE, Firefox and Opera on my Windows machine they all respond and behave the same and expected way.

In all the browsers you're having issues with have you tried private browsing? In Chrome this is incognito mode and in IE it's called InPrivate, I asked because it does look like something other than the browser itself is modifying the layout of the navigation.

Aside from that I really can't think of anything that would cause such an inconsistent result like this as normally you would be able to replicate it across many browsers and PC's alike.

Stephen Roberts
Stephen Roberts
8,580 Points
Stephen Roberts
Stephen Roberts
8,580 Points

Strange I have just used private on IE and Firefox and it both appears that the nav is at the top of the banner. Could it be a plugin in firefox thats causing this then?

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

I have seen in the past (speaking years ago) when browsers didn't really sandbox plugins properly but haven't seen them affect pages recently, the only thing in my mind that would cause an issue like this is the cache but even still you mentioned you've clear that but to no avail have the same issue.

The only other thing I can think of to try is for Firefox uninstalling, removing the data folder from your roaming folder which you can get to using %appdata% in your explorer address path.

NOTE: Deleting this data folder removes all your cookies, saved passwords and any other information that your browser have saved while you've been using it, if you still need this I recommend using Firefox Sync or keeping a backup of the folder.